feat(dt-tag-add): Added custom button and form title

Allows the user to pass a custom value instead of 'Add Tag' (which is still the default value if no custom title is given).

apps/dev/src/tag/tag-demo.component.html

@@ -62,3 +62,14 @@
     ></dt-tag-add>
   </dt-tag-list>
 </div>
+<br /><br />
+
+<dt-tag-list>
+  <dt-tag *ngFor="let user of users">{{ user }}</dt-tag>
+  <dt-tag-add
+    placeholder="Name"
+    title="Add User"
+    (tagAdded)="addUser($event)"
+    dt-ui-test-id="tag-add"
+  ></dt-tag-add>
+</dt-tag-list>

apps/dev/src/tag/tag-demo.component.ts

@@ -25,6 +25,7 @@ import { DtTag } from '@dynatrace/barista-components/tag';
 })
 export class TagDemo implements OnInit {
   tags = new Set<string>();
+  users = new Set<string>();
 
   value1 = 'My value 1';
   value2 = 'My value 2';
@@ -82,12 +83,18 @@ export class TagDemo implements OnInit {
       .add('Pine456')
       .add('Pine421')
       .add('Pine1233');
+
+    this.users.add('John').add('Jane').add('Max');
   }
 
   addTag(tag: string): void {
     this.tags.add(tag);
   }
 
+  addUser(user: string): void {
+    this.users.add(user);
+  }
+
   doRemove(tag: DtTag<string>): void {
     window.alert(`Tag removed: ${tag.value}`);
   }

libs/barista-components/tag/README.md

@@ -69,6 +69,7 @@ elements.
 | ------------- | -------- | ------------ | ----------------------------------------------------------------------- |
 | `placeholder` | `string` | `undefined`  | Placeholder string for the add tag input overlay.                       |
 | `aria-label`  | `string` | `undefinded` | Used to set the 'aria-label' attribute on the underlying input element. |
+| `title`       | `string` | `Add Tag`    | Title of the 'Add' button and overlay.                                  |
 
 ### Outputs
 

libs/barista-components/tag/src/tag-add/tag-add.html

@@ -7,7 +7,7 @@
     #origin="cdkOverlayOrigin"
   >
     <dt-icon class="dt-tag-add-icon-button" name="plus-add"></dt-icon>
-    <span class="dt-tag-add-button-text">Add Tag</span>
+    <span class="dt-tag-add-button-text">{{ title }}</span>
   </button>
   <ng-template
     #overlay
@@ -29,7 +29,8 @@
     >
       <div cdkTrapFocus cdkTrapFocusAutoCapture>
         <button class="dt-tag-add-header" (click)="close()">
-          <dt-icon class="dt-tag-add-icon" name="plus-add"></dt-icon> Add Tag
+          <dt-icon class="dt-tag-add-icon" name="plus-add"></dt-icon>
+          {{ title }}
         </button>
         <div
           class="dt-tag-add-fields"

libs/barista-components/tag/src/tag-add/tag-add.scss

@@ -12,7 +12,7 @@
 
   .dt-tag-add-button {
     height: 24px;
-    width: 88px;
+    min-width: 88px;
     font-size: 12px;
     display: inline-flex;
     color: $turquoise-700;
@@ -42,6 +42,7 @@
     vertical-align: middle;
     line-height: 16px;
     margin-left: 4px;
+    margin-right: 4px;
   }
 }
 

libs/barista-components/tag/src/tag-add/tag-add.spec.ts

@@ -239,6 +239,29 @@ describe('DtTagAdd', () => {
       expect(overlayContainerElement.innerHTML).toContain('dt-ui-test-id');
     }));
 
+    it('should have `Add Tag` as button title', () => {
+      const title = 'Add Tag';
+      const addButtonSpan = addTagNativeElement.querySelector(
+        '.dt-tag-add-button-text',
+      ) as HTMLSpanElement;
+
+      expect(addTagInstance.title).toBe(title);
+      expect(addButtonSpan.textContent).toMatch(title);
+    });
+
+    it('should have `Add Tag` as form title', () => {
+      addTagInstance.open();
+      fixture.detectChanges();
+
+      const title = 'Add Tag';
+      const formHeader = overlayContainerElement.querySelector(
+        '.dt-tag-add-header',
+      ) as HTMLButtonElement;
+
+      expect(addTagInstance.title).toBe(title);
+      expect(formHeader.textContent).toMatch(title);
+    });
+
     describe('keyevent tests', () => {
       it('should close Overlay when ESCAPE is pressed', () => {
         addTagInstance.open();
@@ -303,6 +326,41 @@ describe('DtTagAdd', () => {
       expect(panelAddButton.disabled).toBe(false);
     });
   });
+
+  describe('with custom title', () => {
+    let fixture: ComponentFixture<DtTagComponentCustomTitle>;
+
+    beforeEach(() => {
+      fixture = configureTestingModule(DtTagComponentCustomTitle);
+    });
+
+    afterEach(() => {
+      overlayContainer.ngOnDestroy();
+    });
+
+    it('should have a custom button title', () => {
+      const customTitle = 'custom';
+      const addButtonSpan = addTagNativeElement.querySelector(
+        '.dt-tag-add-button-text',
+      ) as HTMLSpanElement;
+
+      expect(addTagInstance.title).toBe(customTitle);
+      expect(addButtonSpan.textContent).toMatch(customTitle);
+    });
+
+    it('should have a custom form title', () => {
+      addTagInstance.open();
+      fixture.detectChanges();
+
+      const customTitle = 'custom';
+      const formHeader = overlayContainerElement.querySelector(
+        '.dt-tag-add-header',
+      ) as HTMLButtonElement;
+
+      expect(addTagInstance.title).toBe(customTitle);
+      expect(formHeader.textContent).toMatch(customTitle);
+    });
+  });
 });
 
 /** Test component that contains an DtTagAdd. */
@@ -375,3 +433,28 @@ class DtTagCustomFormComponent implements OnInit {
     this.form.reset();
   }
 }
+
+/** Test component that contains an DtTagAdd with a custom title. */
+@Component({
+  selector: 'dt-test-app',
+  template: `
+    <dt-tag *ngFor="let tag of tags">{{ tag }}</dt-tag>
+    <dt-tag-add
+      placeholder="insert tag here"
+      title="custom"
+      (tagAdded)="addTag($event)"
+      dt-ui-test-id="tag-add"
+    ></dt-tag-add>
+  `,
+})
+class DtTagComponentCustomTitle implements OnInit {
+  tags = new Set<string>();
+
+  ngOnInit(): void {
+    this.tags.add('Window').add('Managed').add('Errors');
+  }
+
+  addTag(tag: string): void {
+    this.tags.add(tag);
+  }
+}

libs/barista-components/tag/src/tag-add/tag-add.ts

@@ -68,6 +68,9 @@ export class DtTagAdd implements OnDestroy, AfterContentInit {
   /** Placeholder for the input of the add-tag overlay input. */
   @Input() placeholder: string;
 
+  /** Title of the button and the add-tag overlay input. */
+  @Input() title = 'Add Tag';
+
   /** Used to set the 'aria-label' attribute on the underlying input element. */
   @Input('aria-label') ariaLabel: string;