feat(Button): now support custom ID

GetTerminus · Feb 17, 2020 · 0aaef78 · 0aaef78
1 parent 6de380f
commit 0aaef78
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/terminus-ui/button/src/button.component.html b/terminus-ui/button/src/button.component.html
@@ -6,6 +6,7 @@
     'c-button--progress': showProgress && !isDisabled
   }"
   [attr.aria-label]="actionName"
+  [attr.id]="id"
   [attr.type]="buttonType"
   [disabled]="shouldBeDisabled"
   tabindex="{{ tabIndex }}"

diff --git a/terminus-ui/button/src/button.component.spec.ts b/terminus-ui/button/src/button.component.spec.ts
@@ -22,6 +22,7 @@ import { TsButtonModule } from './button.module';
       [showProgress]="showProgress"
       [collapsed]="collapsed"
       [iconName]="iconName"
+      [id]="myId"
       [format]="format"
       [theme]="theme"
       (clicked)="clicked($event)"
@@ -36,6 +37,7 @@ class TestHostComponent implements OnInit, OnDestroy {
   public format!: string;
   public iconName!: string | undefined;
   public theme!: string;
+  public myId = 'foo';
 
   @ViewChild(TsButtonComponent, { static: true })
   public buttonComponent!: TsButtonComponent;
@@ -461,4 +463,18 @@ describe(`TsButtonComponent`, function() {
 
   });
 
+  describe(`ID`, function() {
+
+    test(`should support a custom ID`, () => {
+      expect(button.getAttribute('id')).toEqual('foo');
+    });
+
+    test(`should fall back to the UID if no ID is passed in`, () => {
+      component.myId = undefined as any;
+      fixture.detectChanges();
+      expect(button.getAttribute('id')).toContain('ts-button-');
+    });
+
+  });
+
 });
diff --git a/terminus-ui/button/src/button.component.ts b/terminus-ui/button/src/button.component.ts
@@ -19,6 +19,8 @@ import {
   tsStyleThemeTypesArray,
 } from '@terminus/ui/utilities';
 
+// Unique ID for each instance
+let nextUniqueId = 0;
 
 /**
  * Define the allowed {@link TsButtonComponent} action types
@@ -129,6 +131,11 @@ export class TsButtonComponent implements OnInit, OnDestroy {
    */
   public originalClickEvent!: MouseEvent;
 
+  /**
+   * Define the default component ID
+   */
+  public readonly uid = `ts-button-${nextUniqueId++}`;
+
   /**
    * Getter returning a boolean based on both the component `isDisabled` flag and the FormControl's disabled status
    */
@@ -218,6 +225,18 @@ export class TsButtonComponent implements OnInit, OnDestroy {
   @Input()
   public isDisabled = false;
 
+  /**
+   * Define an ID for the component
+   */
+  @Input()
+  public set id(value: string) {
+    this._id = value || this.uid;
+  }
+  public get id(): string {
+    return this._id;
+  }
+  protected _id: string = this.uid;
+
   /**
    * Define if the progress indicator should show
    */