feat(progressbar): allow changing progressbar height

Fixes #1904 Closes #1908
ng-bootstrap · Oct 27, 2017 · b329be9 · b329be9
1 parent 56aab46
commit b329be9
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 2 deletions.
diff --git a/demo/src/app/components/progressbar/demos/config/progressbar-config.ts b/demo/src/app/components/progressbar/demos/config/progressbar-config.ts
@@ -13,5 +13,6 @@ export class NgbdProgressbarConfig {
     config.striped = true;
     config.animated = true;
     config.type = 'success';
+    config.height = '20px';
   }
 }
diff --git a/demo/src/app/components/progressbar/demos/height/progressbar-height.html b/demo/src/app/components/progressbar/demos/height/progressbar-height.html
@@ -0,0 +1,4 @@
+<p><ngb-progressbar type="success" [value]="25">default</ngb-progressbar></p>
+<p><ngb-progressbar type="info" [value]="50" height="10px">10px</ngb-progressbar></p>
+<p><ngb-progressbar type="warning" [value]="75" height=".5rem">.5rem</ngb-progressbar></p>
+<p><ngb-progressbar type="danger" [value]="100" [height]="height">{{height}}</ngb-progressbar></p>
diff --git a/demo/src/app/components/progressbar/demos/height/progressbar-height.ts b/demo/src/app/components/progressbar/demos/height/progressbar-height.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngbd-progressbar-height',
+  templateUrl: './progressbar-height.html',
+  styles: [`
+    ngb-progressbar {
+      margin-top: 5rem;
+    }
+  `]
+})
+export class NgbdProgressbarHeight {
+  height = '20px';
+}
diff --git a/demo/src/app/components/progressbar/demos/index.ts b/demo/src/app/components/progressbar/demos/index.ts
@@ -3,13 +3,15 @@ import {NgbdProgressbarShowvalue} from './showvalue/progressbar-showvalue';
 import {NgbdProgressbarStriped} from './striped/progressbar-striped';
 import {NgbdProgressbarConfig} from './config/progressbar-config';
 import {NgbdProgressbarLabels} from './labels/progressbar-labels';
+import { NgbdProgressbarHeight } from './height/progressbar-height';
 
 export const DEMO_DIRECTIVES = [
   NgbdProgressbarBasic,
   NgbdProgressbarShowvalue,
   NgbdProgressbarStriped,
   NgbdProgressbarConfig,
-  NgbdProgressbarLabels
+  NgbdProgressbarLabels,
+  NgbdProgressbarHeight
 ];
 
 export const DEMO_SNIPPETS = {
@@ -25,6 +27,9 @@ export const DEMO_SNIPPETS = {
   'labels': {
     'code': require('!!prismjs-loader?lang=typescript!./labels/progressbar-labels'),
     'markup': require('!!prismjs-loader?lang=markup!./labels/progressbar-labels.html')},
+  'height': {
+    'code': require('!!prismjs-loader?lang=typescript!./height/progressbar-height'),
+    'markup': require('!!prismjs-loader?lang=markup!./height/progressbar-height.html')},
   'config': {
     'code': require('!!prismjs-loader?lang=typescript!./config/progressbar-config'),
     'markup': require('!!prismjs-loader?lang=markup!./config/progressbar-config.html')}

diff --git a/demo/src/app/components/progressbar/progressbar.component.ts b/demo/src/app/components/progressbar/progressbar.component.ts
@@ -19,6 +19,9 @@ import {DEMO_SNIPPETS} from './demos';
       <ngbd-example-box demoTitle="Progress bars with custom labels" [snippets]="snippets" component="progressbar" demo="labels">
         <ngbd-progressbar-labels></ngbd-progressbar-labels>
       </ngbd-example-box>
+      <ngbd-example-box demoTitle="Progress bars with height" [snippets]="snippets" component="progressbar" demo="height">
+        <ngbd-progressbar-height></ngbd-progressbar-height>
+      </ngbd-example-box>
       <ngbd-example-box demoTitle="Global configuration of progress bars" [snippets]="snippets" component="progressbar" demo="config">
         <ngbd-progressbar-config></ngbd-progressbar-config>
       </ngbd-example-box>

diff --git a/src/progressbar/progressbar-config.ts b/src/progressbar/progressbar-config.ts
@@ -12,4 +12,5 @@ export class NgbProgressbarConfig {
   striped = false;
   type: string;
   showValue: boolean = false;
+  height: string;
 }
diff --git a/src/progressbar/progressbar.spec.ts b/src/progressbar/progressbar.spec.ts
@@ -14,6 +14,10 @@ function getBarWidth(nativeEl): string {
   return getProgressbar(nativeEl).style.width;
 }
 
+function getBarHeight(nativeEl): string {
+  return nativeEl.querySelector('.progress').style.height;
+}
+
 function getBarValue(nativeEl): number {
   return parseInt(getProgressbar(nativeEl).getAttribute('aria-valuenow'), 10);
 }
@@ -203,6 +207,13 @@ describe('ngb-progressbar', () => {
 
       expect(fixture.nativeElement.textContent).toContain('100%');
     });
+
+    it('should accepts height values', () => {
+      const html = '<ngb-progressbar [value]="150" height="10px"></ngb-progressbar>';
+      const fixture = createTestComponent(html);
+
+      expect(getBarHeight(fixture.nativeElement)).toBe('10px');
+    });
   });
 
   describe('Custom config', () => {

diff --git a/src/progressbar/progressbar.ts b/src/progressbar/progressbar.ts
@@ -9,7 +9,7 @@ import {NgbProgressbarConfig} from './progressbar-config';
   selector: 'ngb-progressbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="progress">
+    <div class="progress" [style.height]="height">
       <div class="progress-bar{{type ? ' bg-' + type : ''}}{{animated ? ' progress-bar-animated' : ''}}{{striped ?
     ' progress-bar-striped' : ''}}" role="progressbar" [style.width.%]="getPercentValue()"
     [attr.aria-valuenow]="getValue()" aria-valuemin="0" [attr.aria-valuemax]="max">
@@ -50,12 +50,18 @@ export class NgbProgressbar {
    */
   @Input() value = 0;
 
+  /**
+   * Height of the progress bar. Accepts any valid CSS height values, ex. '2rem'
+   */
+  @Input() height: string;
+
   constructor(config: NgbProgressbarConfig) {
     this.max = config.max;
     this.animated = config.animated;
     this.striped = config.striped;
     this.type = config.type;
     this.showValue = config.showValue;
+    this.height = config.height;
   }
 
   getValue() { return getValueInRange(this.value, this.max); }