fix(timepicker): scale chevrons when size option is used

Closes #1300 Closes #1405
ng-bootstrap · Mar 25, 2017 · 493d0b3 · 493d0b3
1 parent deb13b1
commit 493d0b3
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 8 deletions.
diff --git a/src/timepicker/timepicker.spec.ts b/src/timepicker/timepicker.spec.ts
@@ -855,6 +855,65 @@ describe('ngb-timepicker', () => {
     });
   });
 
+  describe('size', () => {
+
+    it('should add appropriate CSS classes to butons and inputs when size is small', () => {
+      const html = `<ngb-timepicker size="small"></ngb-timepicker>`;
+
+      const fixture = createTestComponent(html);
+      const buttons = getButtons(fixture.nativeElement);
+      const inputs = getInputs(fixture.nativeElement);
+      for (let i = 0; i < buttons.length; i++) {
+        expect(buttons[i]).toHaveCssClass('btn-sm');
+      }
+      for (let i = 0; i < inputs.length; i++) {
+        expect(inputs[i]).toHaveCssClass('form-control-sm');
+      }
+    });
+
+    it('should add appropriate CSS classes to butons and inputs when size is large', () => {
+      const html = `<ngb-timepicker size="large"></ngb-timepicker>`;
+
+      const fixture = createTestComponent(html);
+      const buttons = getButtons(fixture.nativeElement);
+      const inputs = getInputs(fixture.nativeElement);
+      for (let i = 0; i < buttons.length; i++) {
+        expect(buttons[i]).toHaveCssClass('btn-lg');
+      }
+      for (let i = 0; i < inputs.length; i++) {
+        expect(inputs[i]).toHaveCssClass('form-control-lg');
+      }
+    });
+
+    it('should not add special CSS classes to butons and inputs when size is medium', () => {
+      const html = `<ngb-timepicker size="medium"></ngb-timepicker>`;
+
+      const fixture = createTestComponent(html);
+      const buttons = getButtons(fixture.nativeElement);
+      const inputs = getInputs(fixture.nativeElement);
+      for (let i = 0; i < buttons.length; i++) {
+        expect(buttons[i]).not.toHaveCssClass('btn-lg');
+      }
+      for (let i = 0; i < inputs.length; i++) {
+        expect(inputs[i]).not.toHaveCssClass('form-control-lg');
+      }
+    });
+
+    it('should not add special CSS classes to butons and inputs when no size is specified', () => {
+      const html = `<ngb-timepicker></ngb-timepicker>`;
+
+      const fixture = createTestComponent(html);
+      const buttons = getButtons(fixture.nativeElement);
+      const inputs = getInputs(fixture.nativeElement);
+      for (let i = 0; i < buttons.length; i++) {
+        expect(buttons[i]).not.toHaveCssClass('btn-lg');
+      }
+      for (let i = 0; i < inputs.length; i++) {
+        expect(inputs[i]).not.toHaveCssClass('form-control-lg');
+      }
+    });
+  });
+
   describe('Custom config', () => {
     let config: NgbTimepickerConfig;
 

diff --git a/src/timepicker/timepicker.ts b/src/timepicker/timepicker.ts
@@ -58,22 +58,22 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
       <table>
         <tr *ngIf="spinners">
           <td class="text-center">
-            <button type="button" class="btn-link" (click)="changeHour(hourStep)"
+            <button type="button" class="btn-link" [ngClass]="setButtonSize()" (click)="changeHour(hourStep)"
               [disabled]="disabled" [class.disabled]="disabled">
               <span class="chevron"></span>
             </button>
           </td>
           <td>&nbsp;</td>
           <td class="text-center">
-            <button type="button" class="btn-link" (click)="changeMinute(minuteStep)"
+            <button type="button" class="btn-link" [ngClass]="setButtonSize()" (click)="changeMinute(minuteStep)"
               [disabled]="disabled" [class.disabled]="disabled">
                 <span class="chevron"></span>
             </button>
           </td>
           <template [ngIf]="seconds">
             <td>&nbsp;</td>
             <td class="text-center">
-              <button type="button" class="btn-link" (click)="changeSecond(secondStep)"
+              <button type="button" class="btn-link" [ngClass]="setButtonSize()" (click)="changeSecond(secondStep)"
                 [disabled]="disabled" [class.disabled]="disabled">
                 <span class="chevron"></span>
               </button>
@@ -107,29 +107,29 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
           <template [ngIf]="meridian">
             <td>&nbsp;&nbsp;</td>
             <td>
-              <button type="button" class="btn btn-outline-primary" [ngClass]="setMeridanSize()"
+              <button type="button" class="btn btn-outline-primary" [ngClass]="setButtonSize()"
                 (click)="toggleMeridian()">{{model.hour >= 12 ? 'PM' : 'AM'}}</button>
             </td>
           </template>
         </tr>
         <tr *ngIf="spinners">
           <td class="text-center">
-            <button type="button" class="btn-link" (click)="changeHour(-hourStep)"
+            <button type="button" class="btn-link" [ngClass]="setButtonSize()" (click)="changeHour(-hourStep)"
               [disabled]="disabled" [class.disabled]="disabled">
               <span class="chevron bottom"></span>
             </button>
           </td>
           <td>&nbsp;</td>
           <td class="text-center">
-            <button type="button" class="btn-link" (click)="changeMinute(-minuteStep)"
+            <button type="button" class="btn-link" [ngClass]="setButtonSize()" (click)="changeMinute(-minuteStep)"
               [disabled]="disabled" [class.disabled]="disabled">
               <span class="chevron bottom"></span>
             </button>
           </td>
           <template [ngIf]="seconds">
             <td>&nbsp;</td>
             <td class="text-center">
-              <button type="button" class="btn-link" (click)="changeSecond(-secondStep)"
+              <button type="button" class="btn-link" [ngClass]="setButtonSize()" (click)="changeSecond(-secondStep)"
                 [disabled]="disabled" [class.disabled]="disabled">
                 <span class="chevron bottom"></span>
               </button>
@@ -270,7 +270,7 @@ export class NgbTimepicker implements ControlValueAccessor,
 
   setFormControlSize() { return {'form-control-sm': this.size === 'small', 'form-control-lg': this.size === 'large'}; }
 
-  setMeridanSize() { return {'btn-sm': this.size === 'small', 'btn-lg': this.size === 'large'}; }
+  setButtonSize() { return {'btn-sm': this.size === 'small', 'btn-lg': this.size === 'large'}; }
 
 
   ngOnChanges(changes: SimpleChanges): void {