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