feat(spinner): Eva style (#1351)

BREAKING CHANGE: Following spinner theme properties were renamed: spinner-bg -> spinner-background-color spinner-circle-bg -> spinner-circle-filled-color spinner-fg -> spinner-text-color spinner-primary-bg -> spinner-primary-circle-filled-color spinner-info-bg -> spinner-info-circle-filled-color spinner-success-bg -> spinner-success-circle-filled-color spinner-warning-bg -> spinner-warning-circle-filled-color spinner-danger-bg -> spinner-danger-circle-filled-color spinner-xsmall -> spinner-height-tiny spinner-small -> spinner-height-small spinner-medium -> spinner-height-medium spinner-large -> spinner-height-large spinner-xlarge -> spinner-height-giant Following properties were removed: spinner-xxsmall spinner-xxlarge spinner-disabled-bg spinner-disabled-fg spinner-active-bg 'active' and 'disabled' along with NbSpinnerComponent STATUS_ACTIVE, STATUS_DISABLED static properties statuses were removed. Following NbSpinnerComponent static properties were removed: SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE, SIZE_XLARGE, SIZE_XXLARGE, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING, STATUS_DANGER. Classes '[size-name]-spinner' changed to 'size-[size-name]'. Classes '[status-name]-spinner' changed to 'status-[status-name]'. NbSpinnerComponent 'xxsmall' and 'xxlarge' getters removed.
akveo · Apr 17, 2019 · 5650f24 · 5650f24
1 parent 7bc5c50
commit 5650f24
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 202 deletions.
diff --git a/docs/structure.ts b/docs/structure.ts
@@ -435,6 +435,7 @@ export const structure = [
         icon: 'spinner.svg',
         source: [
           'NbSpinnerDirective',
+          'NbSpinnerComponent',
         ],
       },
       {

diff --git a/src/framework/theme/components/spinner/_spinner.component.theme.scss b/src/framework/theme/components/spinner/_spinner.component.theme.scss
@@ -11,64 +11,40 @@
   }
 
   nb-spinner {
-    background-color: nb-theme(spinner-bg);
-
-    &.active-spinner .spin-circle {
-      border-right-color: nb-theme(spinner-active-bg);
-    }
-    &.disabled-spinner .spin-circle {
-      border-right-color: nb-theme(spinner-disabled-bg);
-    }
-    &.primary-spinner .spin-circle {
-      border-right-color: nb-theme(spinner-primary-bg);
-    }
-    &.info-spinner .spin-circle {
-      border-right-color: nb-theme(spinner-info-bg);
-    }
-    &.success-spinner .spin-circle {
-      border-right-color: nb-theme(spinner-success-bg);
-    }
-    &.warning-spinner .spin-circle {
-      border-right-color: nb-theme(spinner-warning-bg);
-    }
-    &.danger-spinner .spin-circle {
-      border-right-color: nb-theme(spinner-danger-bg);
-    }
+    background-color: nb-theme(spinner-background-color);
 
     .spin-circle {
-      border-left-color: nb-theme(spinner-circle-bg);
-      border-top-color: nb-theme(spinner-circle-bg);
-      border-bottom-color: nb-theme(spinner-circle-bg);
+      border-right-color: nb-theme(spinner-circle-filled-color);
+      border-left-color: nb-theme(spinner-circle-empty-color);
+      border-top-color: nb-theme(spinner-circle-empty-color);
+      border-bottom-color: nb-theme(spinner-circle-empty-color);
     }
 
     .message {
-      color: nb-theme(spinner-fg);
+      color: nb-theme(spinner-text-color);
+      font-family: nb-theme(spinner-text-font-family);
+      font-size: nb-theme(spinner-text-font-size);
+      font-weight: nb-theme(spinner-text-font-weight);
+      line-height: nb-theme(spinner-text-line-height);
     }
+  }
 
-    &.xxsmall-spinner {
-      font-size: nb-theme(spinner-xxsmall);
-    }
-    &.xsmall-spinner {
-      font-size: nb-theme(spinner-xsmall);
-    }
-    &.small-spinner {
-      font-size: nb-theme(spinner-small);
-    }
-    &.medium-spinner {
-      font-size: nb-theme(spinner-medium);
+  @each $status in nb-get-statuses() {
+    nb-spinner.status-#{$status} .spin-circle {
+      border-top-color: nb-theme(spinner-#{$status}-circle-filled-color);
+      border-right-color: nb-theme(spinner-#{$status}-circle-empty-color);
+      border-bottom-color: nb-theme(spinner-#{$status}-circle-filled-color);
+      border-left-color: nb-theme(spinner-#{$status}-circle-filled-color);
     }
-    &.large-spinner {
-      font-size: nb-theme(spinner-large);
-    }
-    &.xlarge-spinner {
-      font-size: nb-theme(spinner-xlarge);
-    }
-    &.xxlarge-spinner {
-      font-size: nb-theme(spinner-xxlarge);
+  }
+
+  @each $size in nb-get-sizes() {
+    nb-spinner.size-#{$size} {
+      font-size: nb-theme(spinner-height-#{$size});
     }
   }
 
-  @-webkit-keyframes spin {
+  @keyframes spin {
     0% {
       transform: rotate(0deg);
     }

diff --git a/src/framework/theme/components/spinner/spinner.component.scss b/src/framework/theme/components/spinner/spinner.component.scss
@@ -30,7 +30,5 @@
 
   .message {
     margin-left: 0.5rem;
-    line-height: 1rem;
-    font-size: 1rem;
   }
 }
diff --git a/src/framework/theme/components/spinner/spinner.component.ts b/src/framework/theme/components/spinner/spinner.component.ts
@@ -6,8 +6,39 @@
 
 import { Component, HostBinding, Input } from '@angular/core';
 
+import { NbComponentSize } from '../component-size';
+import { NbComponentStatus } from '../component-status';
+
 /**
  * Styled spinner component
+ *
+ * @styles
+ *
+ * spinner-background-color:
+ * spinner-circle-filled-color:
+ * spinner-circle-empty-color:
+ * spinner-text-color:
+ * spinner-text-font-family:
+ * spinner-text-font-size:
+ * spinner-text-font-weight:
+ * spinner-text-line-height:
+ * spinner-primary-circle-filled-color:
+ * spinner-primary-circle-empty-color:
+ * spinner-info-circle-filled-color:
+ * spinner-info-circle-empty-color:
+ * spinner-success-circle-filled-color:
+ * spinner-success-circle-empty-color:
+ * spinner-warning-circle-filled-color:
+ * spinner-warning-circle-empty-color:
+ * spinner-danger-circle-filled-color:
+ * spinner-danger-circle-empty-color:
+ * spinner-white-circle-filled-color:
+ * spinner-white-circle-empty-color:
+ * spinner-height-tiny:
+ * spinner-height-small:
+ * spinner-height-medium:
+ * spinner-height-large:
+ * spinner-height-giant:
  */
 @Component({
   selector: 'nb-spinner',
@@ -19,118 +50,75 @@ import { Component, HostBinding, Input } from '@angular/core';
 })
 export class NbSpinnerComponent {
 
-  static readonly SIZE_XXSMALL = 'xxsmall';
-  static readonly SIZE_XSMALL = 'xsmall';
-  static readonly SIZE_SMALL = 'small';
-  static readonly SIZE_MEDIUM = 'medium';
-  static readonly SIZE_LARGE = 'large';
-  static readonly SIZE_XLARGE = 'xlarge';
-  static readonly SIZE_XXLARGE = 'xxlarge';
-
-  static readonly STATUS_ACTIVE = 'active';
-  static readonly STATUS_DISABLED = 'disabled';
-  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';
-
-  size: string = NbSpinnerComponent.SIZE_MEDIUM;
-  status: string = NbSpinnerComponent.STATUS_ACTIVE;
-
   /**
    * Loading text that is shown near the icon
    * @type string
    */
-  @Input() message: string = 'Loading...';
+  @Input()
+  message: string = 'Loading...';
 
   /**
-   * Spiiner size, available sizes:
-   * xxsmall, xsmall, small, medium, large, xlarge, xxlarge
-   * @param {string} val
+   * Spinner size, available sizes:
+   * tiny, small, medium, large, giant
+   * @param {string} value
    */
-  @Input('size')
-  private set setSize(val: string) {
-    this.size = val;
-  }
+  @Input()
+  size: NbComponentSize = 'medium';
 
   /**
-   * Spiiner status (adds specific styles):
-   * active, disabled, primary, info, success, warning, danger
-   * @param {string} val
+   * Spinner status (adds specific styles):
+   * primary, info, success, warning, danger
    */
-  @Input('status')
-  private set setStatus(val: string) {
-    this.status = val;
-  }
-
-  @HostBinding('class.xxsmall-spinner')
-  get xxsmall() {
-    return this.size === NbSpinnerComponent.SIZE_XXSMALL;
-  }
+  @Input()
+  status: '' | NbComponentStatus;
 
-  @HostBinding('class.xsmall-spinner')
-  get xsmall() {
-    return this.size === NbSpinnerComponent.SIZE_XSMALL;
+  @HostBinding('class.size-tiny')
+  get tiny() {
+    return this.size === 'tiny';
   }
 
-  @HostBinding('class.small-spinner')
+  @HostBinding('class.size-small')
   get small() {
-    return this.size === NbSpinnerComponent.SIZE_SMALL;
+    return this.size === 'small';
   }
 
-  @HostBinding('class.medium-spinner')
+  @HostBinding('class.size-medium')
   get medium() {
-    return this.size === NbSpinnerComponent.SIZE_MEDIUM;
+    return this.size === 'medium';
   }
 
-  @HostBinding('class.large-spinner')
+  @HostBinding('class.size-large')
   get large() {
-    return this.size === NbSpinnerComponent.SIZE_LARGE;
-  }
-
-  @HostBinding('class.xlarge-spinner')
-  get xlarge() {
-    return this.size === NbSpinnerComponent.SIZE_XLARGE;
-  }
-
-  @HostBinding('class.xxlarge-spinner')
-  get xxlarge() {
-    return this.size === NbSpinnerComponent.SIZE_XXLARGE;
-  }
-
-  @HostBinding('class.active-spinner')
-  get active() {
-    return this.status === NbSpinnerComponent.STATUS_ACTIVE;
+    return this.size === 'large';
   }
 
-  @HostBinding('class.disabled-spinner')
-  get disabled() {
-    return this.status === NbSpinnerComponent.STATUS_DISABLED;
+  @HostBinding('class.size-giant')
+  get giant() {
+    return this.size === 'giant';
   }
 
-  @HostBinding('class.primary-spinner')
+  @HostBinding('class.status-primary')
   get primary() {
-    return this.status === NbSpinnerComponent.STATUS_PRIMARY;
+    return this.status === 'primary';
   }
 
-  @HostBinding('class.info-spinner')
+  @HostBinding('class.status-info')
   get info() {
-    return this.status === NbSpinnerComponent.STATUS_INFO;
+    return this.status === 'info';
   }
 
-  @HostBinding('class.success-spinner')
+  @HostBinding('class.status-success')
   get success() {
-    return this.status === NbSpinnerComponent.STATUS_SUCCESS;
+    return this.status === 'success';
   }
 
-  @HostBinding('class.warning-spinner')
+  @HostBinding('class.status-warning')
   get warning() {
-    return this.status === NbSpinnerComponent.STATUS_WARNING;
+    return this.status === 'warning';
   }
 
-  @HostBinding('class.danger-spinner')
+  @HostBinding('class.status-danger')
   get danger() {
-    return this.status === NbSpinnerComponent.STATUS_DANGER;
+    return this.status === 'danger';
   }
 }
diff --git a/src/framework/theme/components/spinner/spinner.directive.ts b/src/framework/theme/components/spinner/spinner.directive.ts
@@ -13,8 +13,12 @@ import {
   Input,
   OnInit,
   Renderer2,
-  ViewContainerRef, HostBinding,
+  ViewContainerRef,
+  HostBinding,
 } from '@angular/core';
+
+import { NbComponentSize } from '../component-size';
+import { NbComponentStatus } from '../component-status';
 import { NbSpinnerComponent } from './spinner.component';
 
 /**
@@ -35,7 +39,7 @@ import { NbSpinnerComponent } from './spinner.component';
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbSpinnerModule,
  *   ],
  * })
@@ -60,28 +64,25 @@ import { NbSpinnerComponent } from './spinner.component';
 @Directive({selector: '[nbSpinner]'})
 export class NbSpinnerDirective implements OnInit {
 
+  private shouldShow = false;
   spinner: ComponentRef<NbSpinnerComponent>;
   componentFactory: ComponentFactory<NbSpinnerComponent>;
 
-  @HostBinding('class.nb-spinner-container') isSpinnerExist = false;
-
   /**
    * Spinner message shown next to the icon
    * @type {string}
    */
   @Input('nbSpinnerMessage') spinnerMessage: string;
 
   /**
-   * Spinner status color active, disabled, primary, info, success, warning, danger
-   * @type {string}
+   * Spinner status color primary, info, success, warning, danger
    */
-  @Input('nbSpinnerStatus') spinnerStatus: string;
+  @Input('nbSpinnerStatus') spinnerStatus: '' | NbComponentStatus;
 
   /**
-   * Spinner size, available sizes: xxsmall, xsmall, small, medium, large, xlarge, xxlarge
-   * @type {string}
+   * Spinner size. Possible values: `tiny`, `small`, `medium` (default), `large`, `giant`
    */
-  @Input('nbSpinnerSize') spinnerSize: string;
+  @Input('nbSpinnerSize') spinnerSize: NbComponentSize = 'medium';
 
   /**
    * Directive value - show or hide spinner
@@ -100,7 +101,7 @@ export class NbSpinnerDirective implements OnInit {
     }
   }
 
-  private shouldShow = false;
+  @HostBinding('class.nb-spinner-container') isSpinnerExist = false;
 
   constructor(private directiveView: ViewContainerRef,
               private componentFactoryResolver: ComponentFactoryResolver,

diff --git a/src/framework/theme/components/spinner/spinner.spec.ts b/src/framework/theme/components/spinner/spinner.spec.ts
@@ -26,7 +26,7 @@ describe('Component: NbSpinner', () => {
     fixture.detectChanges();
     expect(
       fixture
-        .debugElement.nativeElement.classList.contains('danger-spinner'))
+        .debugElement.nativeElement.classList.contains('status-danger'))
       .toBeTruthy()
   });
 
@@ -35,7 +35,7 @@ describe('Component: NbSpinner', () => {
     fixture.detectChanges();
     expect(
       fixture
-        .debugElement.nativeElement.classList.contains('small-spinner'))
+        .debugElement.nativeElement.classList.contains('size-small'))
       .toBeTruthy()
   });