[NG] fix button title for button group (vmware-archive#3136)

* [NG] fix button title for button group Properly set title attribute for button in button group. closes vmware-archive#3132 Signed-off-by: Cory Rylan <crylan@vmware.com>
coryrylan · Mar 1, 2019 · 3388d4b · 3388d4b
1 parent 6e59654
commit 3388d4b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/golden/clr-angular.d.ts b/golden/clr-angular.d.ts
@@ -104,6 +104,7 @@ export declare class ClrButton implements LoadingListener {
     buttonInGroupService: ButtonInGroupService;
     classNames: string;
     disabled: any;
+    id: string;
     inMenu: boolean;
     loading: boolean;
     name: string;

diff --git a/src/clr-angular/button/button-group/button.spec.ts b/src/clr-angular/button/button-group/button.spec.ts
@@ -21,6 +21,7 @@ import { ClrButtonGroupModule } from './button-group.module';
             id="button1"
             type="button"
             name="button1"
+            id="button1"
             (click)="toggleClick()">Button 1
         </clr-button>
         <clr-button
@@ -65,6 +66,7 @@ class TestButtonComponent {
             class="test"
             type="button"
             name="button3"
+            id="button3"
             #button3
         >Test Button 3
         </clr-button>
@@ -132,6 +134,12 @@ export default function(): void {
         expect(componentInstance.button3.name).toBeNull();
       });
 
+      it('supports a id input', () => {
+        expect(componentInstance.button1.id).toBe('button1');
+        expect(componentInstance.button2.id).toBeNull();
+        expect(componentInstance.button3.id).toBeNull();
+      });
+
       it('supports a disabled input which is set to an empty string when the user passes a value', () => {
         expect(componentInstance.button1.disabled).toBeNull();
         expect(componentInstance.button2.disabled).toBeNull();
@@ -246,6 +254,12 @@ export default function(): void {
         expect(buttons[2].name).toBe('button3');
       });
 
+      it('sets the id correctly', () => {
+        expect(buttons[0].id).toBe('null');
+        expect(buttons[1].id).toBe('null');
+        expect(buttons[2].id).toBe('button3');
+      });
+
       it('sets the type correctly', () => {
         expect(buttons[0].type).toBe('submit'); // default
         expect(buttons[1].type).toBe('submit'); // default

diff --git a/src/clr-angular/button/button-group/button.ts b/src/clr-angular/button/button-group/button.ts
@@ -19,7 +19,8 @@ import { ButtonInGroupService } from '../providers/button-in-group.service';
                 (click)="emitClick()"
                 [attr.type]="type"
                 [attr.name]="name"
-                [attr.disabled]="disabled">
+                [attr.disabled]="disabled"
+                [id]="id">
                 <span class="spinner spinner-inline" *ngIf="loading"></span>
                 <ng-content></ng-content>
             </button>
@@ -100,6 +101,19 @@ export class ClrButton implements LoadingListener {
     }
   }
 
+  private _id: string = null;
+
+  get id(): string {
+    return this._id;
+  }
+
+  @Input('id')
+  set id(value: string) {
+    if (typeof value === 'string') {
+      this._id = value;
+    }
+  }
+
   private _disabled: any = null;
 
   get disabled(): any {