feat(icon): Eva theme (#1404)

BREAKING CHANGE: NbIconComponent status static fields removed. STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER. 'status' field now uses common NbComponentStatus type. NbIconComponent static class names renamed to 'status-[status-name]'. Following theme properties were renamed: icon-primary-fg -> icon-primary-color icon-info-fg -> icon-info-color icon-success-fg -> icon-success-color icon-warning-fg -> icon-warning-color icon-danger-fg -> icon-danger-color
akveo · May 27, 2019 · 16f2d19 · 16f2d19
1 parent 4133058
commit 16f2d19
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 55 deletions.
diff --git a/src/framework/theme/components/icon/_icon.component.theme.scss b/src/framework/theme/components/icon/_icon.component.theme.scss
@@ -8,23 +8,13 @@
  nb-icon {
  font-size: nb-theme(icon-font-size);
  line-height: nb-theme(icon-line-height);
- width: 1em;
- height: 1em;
+ width: nb-theme(icon-width);
+ height: nb-theme(icon-height);
+ }
 
- &.primary-icon {
- color: nb-theme(icon-primary-fg);
- }
- &.info-icon {
- color: nb-theme(icon-info-fg);
- }
- &.success-icon {
- color: nb-theme(icon-success-fg);
- }
- &.warning-icon {
- color: nb-theme(icon-warning-fg);
- }
- &.danger-icon {
- color: nb-theme(icon-danger-fg);
+ @each $status in nb-get-statuses() {
+ nb-icon.status-#{$status} {
+ color: nb-theme(icon-#{$status}-color);
  }
  }
 }

diff --git a/src/framework/theme/components/icon/icon.component.ts b/src/framework/theme/components/icon/icon.component.ts
@@ -16,6 +16,7 @@ import {
 } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
+import { NbComponentStatus } from '../component-status';
 import { NbIconLibraries } from './icon-libraries';
 
 /**
@@ -46,7 +47,7 @@ import { NbIconLibraries } from './icon-libraries';
  *
  * @NgModule({
  * imports: [
- *  // ...
+ *  // ...
  * NbEvaIconsModule,
  * ],
  * })
@@ -56,7 +57,7 @@ import { NbIconLibraries } from './icon-libraries';
  * ```ts
  * @NgModule({
  * imports: [
- *  // ...
+ *  // ...
  * NbIconModule,
  * ],
  * })
@@ -85,13 +86,14 @@ import { NbIconLibraries } from './icon-libraries';
  * @styles
  *
  * icon-font-size:
+ * icon-line-height:
  * icon-width:
  * icon-height:
- * icon-primary-fg:
- * icon-info-fg:
- * icon-success-fg:
- * icon-warning-fg:
- * icon-danger-fg:
+ * icon-primary-color:
+ * icon-info-color:
+ * icon-success-color:
+ * icon-warning-color:
+ * icon-danger-color:
  */
 @Component({
  selector: 'nb-icon',
@@ -101,41 +103,35 @@ import { NbIconLibraries } from './icon-libraries';
 })
 export class NbIconComponent implements OnChanges, OnInit {
 
- static readonly STATUS_PRIMARY = 'primary';
- static readonly STATUS_INFO = 'info';
- static readonly STATUS_SUCCESS = 'success';
- static readonly STATUS_WARNING = 'warning';
- static readonly STATUS_DANGER = 'danger';
-
- private iconDef;
- private prevClasses = [];
+ protected iconDef;
+ protected prevClasses = [];
 
  @HostBinding('innerHtml')
  html: SafeHtml;
 
- @HostBinding('class.primary-icon')
+ @HostBinding('class.status-primary')
  get primary() {
- return this.status === NbIconComponent.STATUS_PRIMARY;
+ return this.status === 'primary';
  }
 
- @HostBinding('class.info-icon')
+ @HostBinding('class.status-info')
  get info() {
- return this.status === NbIconComponent.STATUS_INFO;
+ return this.status === 'info';
  }
 
- @HostBinding('class.success-icon')
+ @HostBinding('class.status-success')
  get success() {
- return this.status === NbIconComponent.STATUS_SUCCESS;
+ return this.status === 'success';
  }
 
- @HostBinding('class.warning-icon')
+ @HostBinding('class.status-warning')
  get warning() {
- return this.status === NbIconComponent.STATUS_WARNING;
+ return this.status === 'warning';
  }
 
- @HostBinding('class.danger-icon')
+ @HostBinding('class.status-danger')
  get danger() {
- return this.status === NbIconComponent.STATUS_DANGER;
+ return this.status === 'danger';
  }
 
  /**
@@ -158,16 +154,15 @@ export class NbIconComponent implements OnChanges, OnInit {
 
  /**
  * Icon status (adds specific styles):
- * primary, info, success, warning, danger
- * @param {string} status
+ * `primary`, `info`, `success`, `warning`, `danger`
  */
- @Input() status: string;
+ @Input() status: NbComponentStatus;
 
  constructor(
- private sanitizer: DomSanitizer,
- private iconLibrary: NbIconLibraries,
- private el: ElementRef,
- private renderer: Renderer2,
+ protected sanitizer: DomSanitizer,
+ protected iconLibrary: NbIconLibraries,
+ protected el: ElementRef,
+ protected renderer: Renderer2,
  ) {}
 
  ngOnInit() {

diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -1461,13 +1461,14 @@ $theme: (
  tree-grid-icon-color: color-fg-text,
 
  icon-font-size: 1.25rem,
- icon-width: icon-font-size,
- icon-height: icon-font-size,
- icon-primary-fg: color-primary,
- icon-info-fg: color-info,
- icon-success-fg: color-success,
- icon-warning-fg: color-warning,
- icon-danger-fg: color-danger,
+ icon-line-height: 1,
+ icon-width: 1em,
+ icon-height: 1em,
+ icon-primary-color: color-primary,
+ icon-info-color: color-info,
+ icon-success-color: color-success,
+ icon-warning-color: color-warning,
+ icon-danger-color: color-danger,
 );
 
 // register the theme