feat(theme): ability to add custom statuses (#2625)

BREAKING CHANGE:
Empty string won't be converted to `basic` status anymore. If you used to set `status` properties to `''` change it to `'basic'`.

`NbComponentStatus` type replaced with `NbComponentOrCustomStatus` in following properties: `NbActionComponent.badgeStatus`, `NbBadge.status`, `NbBadgeComponent.status`, `NbButtonComponent.status`, `NbAlertComponent.status`, `NbCardComponent.status`, `NbChatFormComponent.status`, `NbChatComponent.status`, `NbCheckboxComponent.status`, `NbFormFieldControl.status$`, `NbFormControlState.status`, `NbInputDirective.status`, `NbInputDirective.status%`, `NbSelectComponent.status`, `NbSelectComponent.status$`, `NbIconConfig.status`, `NbIconComponent.status`, `NbProgressBarComponent.status`, `NbRadioComponent.status`, `NbRadioGroupComponent.status`, `NbSpinnerDirective.spinnerStatus`, `NbSpinnerComponent.status`, `NbTabComponent.badgeStatus`, `NbToastrConfig.status`, `NbToggleComponent.status`, `NbTooltipDirective.status`, `NbTooltipComponent.context.status`, `NbUserComponent.badgeStatus`.
If you extended listed components replace `NbComponentStatus` in the property type with `NbComponentOrCustomStatus`.

`NbBadgeComponent`, `NbButtonComponent`, `NbAlertComponent`, `NbCardComponent`, `NbChatComponent`, `NbCheckboxComponent`, `NbInputDirective`, `NbSelectComponent`, `NbIconComponent`, `NbProgressBarComponent`, `NbRadioComponent`, `NbSpinnerComponent`, `NbToastComponent`, `NbToggleComponent`, `NbTooltipComponent` constructors now require `NbStatusService` as a constructor parameter. If you extended listed components, inject `NbStatusService` and pass it to the base class.

src/framework/bootstrap/styles/_button-group.scss

@@ -88,7 +88,7 @@
     }
   }
 
-  @each $status in nb-get-statuses() {
+  @each $status in nb-get-core-statuses() {
     .btn-group:not(.btn-divided-group) {
       .btn.btn-outline-#{$status}.active {
         background-color: nb-theme(button-filled-#{$status}-active-background-color);
@@ -244,7 +244,7 @@
   }
 
   .btn-divided-group {
-    @each $status in nb-get-statuses() {
+    @each $status in nb-get-core-statuses() {
       .btn-#{$status} {
         background-color: nb-theme(button-filled-#{$status}-background-color);
         border-color: nb-theme(button-filled-#{$status}-border-color);

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

@@ -8,7 +8,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbComponentSize } from '../component-size';
-import { NbComponentStatus } from '../component-status';
+import { NbComponentOrCustomStatus } from '../component-status';
 import { NbBadgePosition } from '../badge/badge.component';
 import { NbIconConfig } from '../icon/icon.component';
 
@@ -121,10 +121,10 @@ export class NbActionComponent {
 
   /**
    * Badge status (adds specific styles):
-   * 'primary', 'info', 'success', 'warning', 'danger'
+   * 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control'
    * @param {string} val
    */
-  @Input() badgeStatus: NbComponentStatus = 'basic';
+  @Input() badgeStatus: NbComponentOrCustomStatus = 'basic';
 
   /**
    * Badge position.

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

@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterLinkWithHref } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
+
 import {
   NbActionComponent,
   NbActionsComponent,
@@ -206,7 +207,8 @@ describe('NbActionComponent content projection', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ RouterTestingModule.withRoutes([]), NbActionsModule ], declarations: [ NbActionsTestComponent ],
+      imports: [ RouterTestingModule.withRoutes([]), NbThemeModule.forRoot(), NbActionsModule ],
+      declarations: [ NbActionsTestComponent ],
     });
     const iconLibs: NbIconLibraries = TestBed.inject(NbIconLibraries);
     iconLibs.setDefaultPack('nebular-essentials');

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

@@ -6,9 +6,10 @@
 
 import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/core';
 
+import { NbStatusService } from '../../services/status.service';
 import { NbComponentSize } from '../component-size';
-import { NbComponentStatus } from '../component-status';
-import { convertToBoolProperty, emptyStatusWarning, NbBooleanInput } from '../helpers';
+import { NbComponentOrCustomStatus, NbComponentStatus } from '../component-status';
+import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 
 
 /**
@@ -130,18 +131,7 @@ export class NbAlertComponent {
    * Alert status (adds specific styles):
    * `basic` (default), `primary`, `success`, `info`, `warning`, `danger`, `control`.
    */
-  @Input()
-  get status(): NbComponentStatus {
-    return this._status;
-  }
-  set status(value: NbComponentStatus) {
-    if ((value as string) === '') {
-      emptyStatusWarning('NbAlert');
-      value = 'basic';
-    }
-    this._status = value;
-  }
-  protected _status: NbComponentStatus = 'basic';
+  @Input() status: NbComponentOrCustomStatus = 'basic';
 
   /**
    * Alert accent (color of the top border):
@@ -177,6 +167,9 @@ export class NbAlertComponent {
    */
   @Output() close = new EventEmitter();
 
+  constructor(protected statusService: NbStatusService) {
+  }
+
   /**
    * Emits the removed chip event
    */
@@ -313,4 +306,12 @@ export class NbAlertComponent {
   get controlOutline() {
     return this.outline === 'control';
   }
+
+  @HostBinding('class')
+  get additionalClasses(): string[] {
+    if (this.statusService.isCustomStatus(this.status)) {
+      return [this.statusService.getStatusClass(this.status)];
+    }
+    return [];
+  }
 }

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

@@ -5,7 +5,8 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NbAlertComponent } from './alert.component';
+
+import { NbAlertComponent, NbAlertModule, NbThemeModule } from '@nebular/theme';
 
 describe('Component: NbAlert', () => {
 
@@ -14,7 +15,7 @@ describe('Component: NbAlert', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [NbAlertComponent],
+      imports: [ NbThemeModule.forRoot(), NbAlertModule ],
     });
 
     fixture = TestBed.createComponent(NbAlertComponent);

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

@@ -1,13 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NbBadgeComponent, NbBadgeModule, NbBadgePosition, NbComponentStatus } from '@nebular/theme';
+
+import { NbBadgeComponent, NbBadgeModule, NbBadgePosition, NbComponentStatus, NbThemeModule } from '@nebular/theme';
 
 describe('NbBadgeComponent', () => {
   let fixture: ComponentFixture<NbBadgeComponent>;
   let badgeComponent: NbBadgeComponent;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ NbBadgeModule ],
+      imports: [ NbThemeModule.forRoot(), NbBadgeModule ],
     });
 
     fixture = TestBed.createComponent(NbBadgeComponent);

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

@@ -6,8 +6,9 @@
 
 import { Component, HostBinding, Input } from '@angular/core';
 
-import { NbComponentStatus } from '../component-status';
-import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
+import { NbStatusService } from '../../services/status.service';
+import { NbComponentOrCustomStatus } from '../component-status';
+import { convertToBoolProperty } from '../helpers';
 
 export type NbBadgePhysicalPosition = 'top left' | 'top right' | 'bottom left' | 'bottom right' | 'center right' | 'center left';
 export type NbBadgeLogicalPosition = 'top start' | 'top end' | 'bottom start' | 'bottom end' | 'center start'| 'center end';
@@ -16,7 +17,7 @@ export type NbBadgePosition = NbBadgePhysicalPosition | NbBadgeLogicalPosition;
 export interface NbBadge {
   text?: string;
   position?: NbBadgePosition;
-  status?: NbComponentStatus;
+  status?: NbComponentOrCustomStatus;
   dotMode?: boolean;
 }
 
@@ -131,18 +132,15 @@ export class NbBadgeComponent implements NbBadge {
    * Badge status (adds specific styles):
    * 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control'
    */
-  @Input()
-  get status(): NbComponentStatus {
-    return this._status;
-  }
-  set status(value: NbComponentStatus) {
-    if ((value as string) === '') {
-      emptyStatusWarning('NbBadge');
-      value = 'basic';
+  @Input() status: NbComponentOrCustomStatus = 'basic';
+
+  @HostBinding('class')
+  get additionalClasses(): string[] {
+    if (this.statusService.isCustomStatus(this.status)) {
+      return [this.statusService.getStatusClass(this.status)];
     }
-    this._status = value;
+    return [];
   }
-  protected _status: NbComponentStatus = 'basic';
 
   @HostBinding('class.status-primary')
   get primary(): boolean {
@@ -213,4 +211,7 @@ export class NbBadgeComponent implements NbBadge {
   get center(): boolean {
     return this.position.includes('center');
   }
+
+  constructor(protected statusService: NbStatusService) {
+  }
 }

src/framework/theme/components/button-group/_button-group.component.theme.scss

@@ -43,10 +43,6 @@
       }
 
       &.appearance-filled {
-        .status-basic {
-          color: nb-theme(button-group-filled-button-basic-text-color);
-        }
-
         @each $status in nb-get-statuses() {
           // I can't figure out any sane selector to turn the start border into a divider for buttons
           // in the default state only (not hovered, focused, etc.). So I went with this horrible thing.
@@ -56,6 +52,10 @@
             @include nb-ltr(border-left-color, nb-theme(button-group-filled-#{$status}-divider-color));
             @include nb-rtl(border-right-color, nb-theme(button-group-filled-#{$status}-divider-color));
           }
+
+          &.status-#{$status} {
+            color: nb-theme(button-group-filled-button-#{$status}-text-color);
+          }
         }
       }
 

src/framework/theme/components/button-group/button-group.component.ts

@@ -19,10 +19,11 @@ import {
 import { from, merge, Observable, Subject } from 'rxjs';
 import { filter, switchMap, takeUntil } from 'rxjs/operators';
 
+import { NbStatusService } from '../../services/status.service';
 import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbComponentSize } from '../component-size';
 import { NbComponentShape } from '../component-shape';
-import { NbComponentStatus } from '../component-status';
+import { NbComponentOrCustomStatus } from '../component-status';
 import { NbButton } from '../button/base-button';
 import { NbButtonToggleAppearance, NbButtonToggleChange, NbButtonToggleDirective } from './button-toggle.directive';
 
@@ -75,6 +76,12 @@ import { NbButtonToggleAppearance, NbButtonToggleChange, NbButtonToggleDirective
  * @styles
  *
  * button-group-filled-button-basic-text-color:
+ * button-group-filled-button-primary-text-color:
+ * button-group-filled-button-success-text-color:
+ * button-group-filled-button-info-text-color:
+ * button-group-filled-button-warning-text-color:
+ * button-group-filled-button-danger-text-color:
+ * button-group-filled-button-control-text-color:
  * button-group-filled-basic-divider-color:
  * button-group-filled-primary-divider-color:
  * button-group-filled-success-divider-color:
@@ -108,7 +115,7 @@ export class NbButtonGroupComponent implements OnChanges, AfterContentInit {
    * Button group status (adds specific styles):
    * `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control`
    */
-  @Input() status: NbComponentStatus = 'basic';
+  @Input() status: NbComponentOrCustomStatus = 'basic';
 
   /**
    * Button group shapes: `rectangle`, `round`, `semi-round`
@@ -189,7 +196,18 @@ export class NbButtonGroupComponent implements OnChanges, AfterContentInit {
 
   @HostBinding('attr.role') role = 'group';
 
-  constructor(protected cd: ChangeDetectorRef) {}
+  @HostBinding('class')
+  get additionalClasses(): string[] {
+    if (this.statusService.isCustomStatus(this.status)) {
+      return [this.statusService.getStatusClass(this.status)];
+    }
+    return [];
+  }
+
+  constructor(
+    protected cd: ChangeDetectorRef,
+    protected statusService: NbStatusService,
+  ) {}
 
   ngOnChanges({ size, status, shape, multiple, filled, outline, ghost, disabled }: SimpleChanges) {
     if (size || status || shape || multiple || filled || outline || ghost || disabled) {

src/framework/theme/components/button-group/button-group.spec.ts

@@ -16,6 +16,7 @@ import {
   NbComponentShape,
   NbComponentStatus,
   NbButtonToggleAppearance,
+  NbThemeModule,
 } from '@nebular/theme';
 
 @Component({
@@ -56,8 +57,8 @@ describe('Component: NbButtonGroup', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
+      imports: [ NbThemeModule.forRoot(), NbButtonGroupModule, NbButtonModule ],
       declarations: [NbButtonGroupTestComponent],
-      imports: [NbButtonGroupModule, NbButtonModule],
     });
 
     fixture = TestBed.createComponent(NbButtonGroupTestComponent);

src/framework/theme/components/button-group/button-toggle.directive.ts

@@ -18,6 +18,7 @@ import {
 } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 
+import { NbStatusService } from '../../services/status.service';
 import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbButton, NbButtonAppearance } from '../button/base-button';
 
@@ -107,6 +108,14 @@ export class NbButtonToggleDirective extends NbButton {
     return this.pressed && this.status === 'control';
   }
 
+  @HostBinding('class')
+  get additionalClasses(): string[] {
+    if (this.statusService.isCustomStatus(this.status)) {
+      return [this.statusService.getStatusClass(this.status)];
+    }
+    return [];
+  }
+
   @HostListener('click')
   onClick(): void {
     this.pressed = !this.pressed;
@@ -117,8 +126,9 @@ export class NbButtonToggleDirective extends NbButton {
     protected hostElement: ElementRef<HTMLElement>,
     protected cd: ChangeDetectorRef,
     protected zone: NgZone,
+    protected statusService: NbStatusService,
   ) {
-    super(renderer, hostElement, cd, zone);
+    super(renderer, hostElement, cd, zone, statusService);
   }
 
   /**

src/framework/theme/components/button/base-button.ts

@@ -8,10 +8,12 @@ import {
   NgZone,
   Renderer2,
 } from '@angular/core';
+
+import { NbStatusService } from '../../services/status.service';
+import { convertToBoolProperty, firstChildNotComment, lastChildNotComment, NbBooleanInput } from '../helpers';
 import { NbComponentSize } from '../component-size';
-import { NbComponentStatus } from '../component-status';
+import { NbComponentOrCustomStatus } from '../component-status';
 import { NbComponentShape } from '../component-shape';
-import { convertToBoolProperty, firstChildNotComment, lastChildNotComment, NbBooleanInput } from '../helpers';
 
 export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';
 
@@ -30,7 +32,7 @@ export abstract class NbButton implements AfterViewInit {
    * Button status (adds specific styles):
    * `primary`, `info`, `success`, `warning`, `danger`
    */
-  @Input() status: NbComponentStatus = 'basic';
+  @Input() status: NbComponentOrCustomStatus = 'basic';
 
   /**
    * Button shapes: `rectangle`, `round`, `semi-round`
@@ -192,11 +194,20 @@ export abstract class NbButton implements AfterViewInit {
     return !!(icon && lastChildNotComment(el) === icon);
   }
 
+  @HostBinding('class')
+  get additionalClasses(): string[] {
+    if (this.statusService.isCustomStatus(this.status)) {
+      return [this.statusService.getStatusClass(this.status)];
+    }
+    return [];
+  }
+
   protected constructor(
     protected renderer: Renderer2,
     protected hostElement: ElementRef<HTMLElement>,
     protected cd: ChangeDetectorRef,
     protected zone: NgZone,
+    protected statusService: NbStatusService,
   ) {
   }
 

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

@@ -17,7 +17,8 @@ import {
   NgZone,
 } from '@angular/core';
 
-import { convertToBoolProperty, firstChildNotComment, lastChildNotComment, NbBooleanInput } from '../helpers';
+import { NbStatusService } from '../../services/status.service';
+import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbButton } from './base-button';
 
 /**
@@ -608,7 +609,8 @@ export class NbButtonComponent extends NbButton implements AfterViewInit {
     protected hostElement: ElementRef<HTMLElement>,
     protected cd: ChangeDetectorRef,
     protected zone: NgZone,
+    protected statusService: NbStatusService,
   ) {
-    super(renderer, hostElement, cd, zone);
+    super(renderer, hostElement, cd, zone, statusService);
   }
 }