feat(progress): Eva style (#1361)

BREAKING CHANGE:

Following progress theme variables were renamed:
progress-bar-height-xlg -> progress-bar-giant-height
progress-bar-height-lg -> progress-bar-large-height
progress-bar-height -> progress-bar-medium-height
progress-bar-height-sm -> progress-bar-small-height
progress-bar-height-xs -> progress-bar-tiny-height
progress-bar-font-size-xlg -> progress-bar-giant-text-font-size
progress-bar-font-size-lg -> progress-bar-large-text-font-size
progress-bar-font-size -> progress-bar-medium-text-font-size
progress-bar-font-size-sm -> progress-bar-small-text-font-size
progress-bar-font-size-xs -> progress-bar-tiny-text-font-size
progress-bar-radius -> progress-bar-border-radius
progress-bar-bg -> progress-bar-[status]-background-color
progress-bar-font-color -> progress-bar-[status]-background-color
progress-bar-font-weight -> progress-bar-[size]-text-font-weight
progress-bar-primary-bg -> progress-bar-[status]-background-color
progress-bar-success-bg -> progress-bar-[status]-background-color
progress-bar-info-bg -> progress-bar-[status]-background-color
progress-bar-warning-bg -> progress-bar-[status]-background-color
progress-bar-danger-bg -> progress-bar-[status]-background-color

'progress-bar-default-bg' removed.

Size values changed from 'xs', 'sm', 'lg', 'xlg' changed to 'tiny',
'small', 'medium', 'large', 'giant'.

Size classes now set on nb-progress-bar element. Also class naming
changed to 'size-[size-name]', 'status-[status-name]'.

src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss

@@ -5,58 +5,47 @@
  */
 
 @mixin nb-progress-bar-theme() {
+  nb-progress-bar {
+    .progress-container {
+      border-radius: nb-theme(progress-bar-border-radius);
+    }
 
-  .progress-container {
-    height: nb-theme(progress-bar-height);
-    border-radius: nb-theme(progress-bar-radius);
-    background-color: nb-theme(progress-bar-bg);
-    &.xlg {
-      .progress-value {
-        font-size: nb-theme(progress-bar-font-size-xlg);
-      }
-      height: nb-theme(progress-bar-height-xlg);
+    .progress-value {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: nb-theme(progress-bar-text-font-family);
+      transition-duration: nb-theme(progress-bar-animation-duration);
+      transition-property: width, background-color;
     }
-    &.lg {
-      .progress-value {
-        font-size: nb-theme(progress-bar-font-size-lg);
+  }
+
+  @each $size in nb-get-sizes() {
+
+    nb-progress-bar.size-#{$size} {
+      .progress-container {
+        height: nb-theme(progress-bar-#{$size}-height);
       }
-      height: nb-theme(progress-bar-height-lg);
-    }
-    &.sm {
+
       .progress-value {
-        font-size: nb-theme(progress-bar-font-size-sm);
+        font-size: nb-theme(progress-bar-#{$size}-text-font-size);
+        font-weight: nb-theme(progress-bar-#{$size}-text-font-weight);
+        line-height: nb-theme(progress-bar-#{$size}-text-line-height);
       }
-      height: nb-theme(progress-bar-height-sm);
     }
-    &.xs {
+  }
+
+  @each $status in nb-get-statuses() {
+
+    nb-progress-bar.status-#{$status} {
+      .progress-container {
+        background-color: nb-theme(progress-bar-#{$status}-background-color);
+      }
+
       .progress-value {
-        font-size: nb-theme(progress-bar-font-size-xs);
+        background-color: nb-theme(progress-bar-#{$status}-filled-background-color);
+        color: nb-theme(progress-bar-#{$status}-text-color);
       }
-      height: nb-theme(progress-bar-height-xs);
-    }
-  }
-  .progress-value {
-    background-color: nb-theme(progress-bar-default-bg);
-    color: nb-theme(progress-bar-font-color);
-    font-size: nb-theme(progress-bar-font-size);
-    font-weight: nb-theme(progress-bar-font-weight);
-    line-height: nb-theme(progress-bar-line-height);
-    transition-duration: nb-theme(progress-bar-animation-duration);
-    transition-property: width, background-color;
-    &.primary {
-      background-color: nb-theme(progress-bar-primary-bg);
-    }
-    &.info {
-      background-color: nb-theme(progress-bar-info-bg);
-    }
-    &.success {
-      background-color: nb-theme(progress-bar-success-bg);
-    }
-    &.warning {
-      background-color: nb-theme(progress-bar-warning-bg);
-    }
-    &.danger {
-      background-color: nb-theme(progress-bar-danger-bg);
     }
   }
 }

src/framework/theme/components/progress-bar/progress-bar.component.ts

@@ -4,7 +4,8 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
+import { NbComponentSize, NbComponentStatus } from '@nebular/theme';
 
 /**
  * Progress Bar is a component for indicating progress.
@@ -20,7 +21,7 @@ import { Component, Input } from '@angular/core';
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbProgressBarModule,
  *   ],
  * })
@@ -45,33 +46,51 @@ import { Component, Input } from '@angular/core';
  *
  * @styles
  *
- * progress-bar-height-xlg:
- * progress-bar-height-lg:
- * progress-bar-height:
- * progress-bar-height-sm:
- * progress-bar-height-xs:
- * progress-bar-font-size-xlg:
- * progress-bar-font-size-lg:
- * progress-bar-font-size:
- * progress-bar-font-size-sm:
- * progress-bar-font-size-xs:
- * progress-bar-radius:
- * progress-bar-bg-color:
- * progress-bar-font-color:
- * progress-bar-font-weight:
- * progress-bar-default-bg-color:
- * progress-bar-primary-bg-color:
- * progress-bar-success-bg-color:
- * progress-bar-info-bg-color:
- * progress-bar-warning-bg-color:
- * progress-bar-danger-bg-color:
+ * progress-bar-animation-duration:
+ * progress-bar-border-radius:
+ * progress-bar-text-font-family:
+ * progress-bar-tiny-height:
+ * progress-bar-tiny-text-font-size:
+ * progress-bar-tiny-text-font-weight:
+ * progress-bar-tiny-text-line-height:
+ * progress-bar-small-height:
+ * progress-bar-small-text-font-size:
+ * progress-bar-small-text-font-weight:
+ * progress-bar-small-text-line-height:
+ * progress-bar-medium-height:
+ * progress-bar-medium-text-font-size:
+ * progress-bar-medium-text-font-weight:
+ * progress-bar-medium-text-line-height:
+ * progress-bar-large-height:
+ * progress-bar-large-text-font-size:
+ * progress-bar-large-text-font-weight:
+ * progress-bar-large-text-line-height:
+ * progress-bar-giant-height:
+ * progress-bar-giant-text-font-size:
+ * progress-bar-giant-text-font-weight:
+ * progress-bar-giant-text-line-height:
+ * progress-bar-primary-background-color:
+ * progress-bar-primary-filled-background-color:
+ * progress-bar-primary-text-color:
+ * progress-bar-success-background-color:
+ * progress-bar-success-filled-background-color:
+ * progress-bar-success-text-color:
+ * progress-bar-info-background-color:
+ * progress-bar-info-filled-background-color:
+ * progress-bar-info-text-color:
+ * progress-bar-warning-background-color:
+ * progress-bar-warning-filled-background-color:
+ * progress-bar-warning-text-color:
+ * progress-bar-danger-background-color:
+ * progress-bar-danger-filled-background-color:
+ * progress-bar-danger-text-color:
  */
 @Component({
   selector: 'nb-progress-bar',
   styleUrls: ['./progress-bar.component.scss'],
   template: `
-    <div class="progress-container {{ size ? '' + size : '' }}">
-      <div class="progress-value {{ status ? '' + status : '' }}" [style.width.%]="value">
+    <div class="progress-container">
+      <div class="progress-value" [style.width.%]="value">
         <span *ngIf="displayValue">{{ value }}%</span>
         <ng-content></ng-content>
       </div>
@@ -82,27 +101,71 @@ export class NbProgressBarComponent {
 
   /**
    * Progress bar value in percent (0 - 100)
-   * @type {number}
-   * @private
    */
   @Input() value: number = 0;
 
   /**
-   * Progress bar background (primary, info success, warning, danger)
-   * @param {string} val
+   * Progress bar background (`primary` (default), `info`, `success`, `warning`, `danger`)
    */
-  @Input() status: string;
+  @Input() status: NbComponentStatus = 'primary';
 
   /**
-   * Progress bar size (xs, sm, lg, xlg)
-   * @param {string} val
+   * Progress bar size (`tiny`, `small`, `medium` (default), `large`, `giant`)
    */
-  @Input() size: string;
+  @Input() size: NbComponentSize = 'medium';
 
   /**
    * Displays value inside progress bar
-   * @param {string} val
    */
   @Input() displayValue: boolean = false;
 
+  @HostBinding('class.size-tiny')
+  get tiny(): boolean {
+    return this.size === 'tiny';
+  }
+
+  @HostBinding('class.size-small')
+  get small(): boolean {
+    return this.size === 'small';
+  }
+
+  @HostBinding('class.size-medium')
+  get medium(): boolean {
+    return this.size === 'medium';
+  }
+
+  @HostBinding('class.size-large')
+  get large(): boolean {
+    return this.size === 'large';
+  }
+
+  @HostBinding('class.size-giant')
+  get giant(): boolean {
+    return this.size === 'giant';
+  }
+
+  @HostBinding('class.status-primary')
+  get primary(): boolean {
+    return this.status === 'primary';
+  }
+
+  @HostBinding('class.status-success')
+  get success(): boolean {
+    return this.status === 'success';
+  }
+
+  @HostBinding('class.status-info')
+  get info(): boolean {
+    return this.status === 'info';
+  }
+
+  @HostBinding('class.status-warning')
+  get warning(): boolean {
+    return this.status === 'warning';
+  }
+
+  @HostBinding('class.status-danger')
+  get danger(): boolean {
+    return this.status === 'danger';
+  }
 }

src/framework/theme/components/progress-bar/progress-bar.spec.ts

@@ -29,21 +29,13 @@ describe('Component: NbProgressBar', () => {
   it('Setting status danger should set class danger', () => {
     progressBar.status = 'danger';
     fixture.detectChanges();
-    expect(
-      fixture
-        .debugElement
-        .query(By.css('.progress-value')).nativeElement.classList.contains('danger'))
-      .toBeTruthy()
+    expect(fixture.nativeElement.classList).toContain('status-danger')
   });
 
-  it('Setting size sm should set class sm', () => {
-    progressBar.size = 'sm';
+  it('Setting size should set class', () => {
+    progressBar.size = 'small';
     fixture.detectChanges();
-    expect(
-      fixture
-        .debugElement
-        .query(By.css('.progress-container')).nativeElement.classList.contains('sm'))
-      .toBeTruthy()
+    expect((fixture.nativeElement as HTMLElement).classList).toContain('size-small');
   });
 
   it('Setting displayValue should create span with value label', () => {

src/framework/theme/styles/themes/_default.scss

@@ -1080,27 +1080,46 @@ $theme: (
   badge-warning-bg-color: color-warning,
   badge-danger-bg-color: color-danger,
 
-  progress-bar-height-xlg: 1.75rem,
-  progress-bar-height-lg: 1.5rem,
-  progress-bar-height: 1.375rem,
-  progress-bar-height-sm: 1.25rem,
-  progress-bar-height-xs: 1rem,
   progress-bar-animation-duration: 400ms,
-  progress-bar-font-size-xlg: font-size-xlg,
-  progress-bar-font-size-lg: font-size-lg,
-  progress-bar-font-size: font-size,
-  progress-bar-font-size-sm: font-size-sm,
-  progress-bar-font-size-xs: font-size-xs,
-  progress-bar-radius: radius,
-  progress-bar-bg: layout-bg,
-  progress-bar-font-color: color-white,
-  progress-bar-font-weight: font-weight-bold,
-  progress-bar-default-bg: color-info,
-  progress-bar-primary-bg: color-primary,
-  progress-bar-success-bg: color-success,
-  progress-bar-info-bg: color-info,
-  progress-bar-warning-bg: color-warning,
-  progress-bar-danger-bg: color-danger,
+  progress-bar-border-radius: radius,
+  progress-bar-text-font-family: text-subtitle-font-family,
+
+  progress-bar-tiny-height: 1rem,
+  progress-bar-tiny-text-font-size: text-subtitle-2-font-size,
+  progress-bar-tiny-text-font-weight: text-subtitle-2-font-weight,
+  progress-bar-tiny-text-line-height: text-subtitle-2-line-height,
+  progress-bar-small-height: 1.25rem,
+  progress-bar-small-text-font-size: text-subtitle-2-font-size,
+  progress-bar-small-text-font-weight: text-subtitle-2-font-weight,
+  progress-bar-small-text-line-height: text-subtitle-2-line-height,
+  progress-bar-medium-height: 1.375rem,
+  progress-bar-medium-text-font-size: text-subtitle-font-size,
+  progress-bar-medium-text-font-weight: text-subtitle-font-weight,
+  progress-bar-medium-text-line-height: text-subtitle-line-height,
+  progress-bar-large-height: 1.5rem,
+  progress-bar-large-text-font-size: text-subtitle-font-size,
+  progress-bar-large-text-font-weight: text-subtitle-font-weight,
+  progress-bar-large-text-line-height: text-subtitle-line-height,
+  progress-bar-giant-height: 1.75rem,
+  progress-bar-giant-text-font-size: text-subtitle-font-size,
+  progress-bar-giant-text-font-weight: text-subtitle-font-weight,
+  progress-bar-giant-text-line-height: text-subtitle-line-height,
+
+  progress-bar-primary-background-color: color-basic-200,
+  progress-bar-primary-filled-background-color: color-primary,
+  progress-bar-primary-text-color: text-light-color,
+  progress-bar-success-background-color: color-basic-200,
+  progress-bar-success-filled-background-color: color-success,
+  progress-bar-success-text-color: text-light-color,
+  progress-bar-info-background-color: color-basic-200,
+  progress-bar-info-filled-background-color: color-info,
+  progress-bar-info-text-color: text-light-color,
+  progress-bar-warning-background-color: color-basic-200,
+  progress-bar-warning-filled-background-color: color-warning,
+  progress-bar-warning-text-color: text-light-color,
+  progress-bar-danger-background-color: color-basic-200,
+  progress-bar-danger-filled-background-color: color-danger,
+  progress-bar-danger-text-color: text-light-color,
 
   alert-font-size: font-size,
   alert-line-height: line-height,

src/playground/with-layout/progress-bar/progress-bar-size.component.html

@@ -1,9 +1,9 @@
 <nb-card>
   <nb-card-body>
-    <nb-progress-bar [value]="20" size="xs">xs</nb-progress-bar>
-    <nb-progress-bar [value]="40" size="sm">sm</nb-progress-bar>
-    <nb-progress-bar [value]="60">none</nb-progress-bar>
-    <nb-progress-bar [value]="80" size="lg">lg</nb-progress-bar>
-    <nb-progress-bar [value]="100" size="xlg">xlg</nb-progress-bar>
+    <nb-progress-bar [value]="20" size="tiny">tiny</nb-progress-bar>
+    <nb-progress-bar [value]="40" size="small">small</nb-progress-bar>
+    <nb-progress-bar [value]="60">medium</nb-progress-bar>
+    <nb-progress-bar [value]="80" size="large">large</nb-progress-bar>
+    <nb-progress-bar [value]="100" size="giant">giant</nb-progress-bar>
   </nb-card-body>
 </nb-card>