feat: add target property to side-nav-item (#7088)

* feat: add target property to side-nav-item * test: add tests for target property * test: remove test and change check
vaadin · Jan 18, 2024 · e042c3e · e042c3e
1 parent da40288
commit e042c3e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/packages/side-nav/src/vaadin-side-nav-item.d.ts b/packages/side-nav/src/vaadin-side-nav-item.d.ts
@@ -100,6 +100,11 @@ declare class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixi
    */
   readonly current: boolean;
 
+  /**
+   * The target of the link. Works only when `path` is set.
+   */
+  target: string | null | undefined;
+
   addEventListener<K extends keyof SideNavItemEventMap>(
     type: K,
     listener: (this: SideNavItem, ev: SideNavItemEventMap[K]) => void,

diff --git a/packages/side-nav/src/vaadin-side-nav-item.js b/packages/side-nav/src/vaadin-side-nav-item.js
@@ -127,6 +127,11 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         readOnly: true,
         reflectToAttribute: true,
       },
+
+      /**
+       * The target of the link. Works only when `path` is set.
+       */
+      target: String,
     };
   }
 
@@ -201,6 +206,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
           ?disabled="${this.disabled}"
           tabindex="${this.disabled || this.path == null ? '-1' : '0'}"
           href="${ifDefined(this.disabled ? null : this.path)}"
+          target="${ifDefined(this.target)}"
           part="link"
           aria-current="${this.current ? 'page' : 'false'}"
         >

diff --git a/packages/side-nav/test/side-nav-item.test.js b/packages/side-nav/test/side-nav-item.test.js
@@ -292,5 +292,21 @@ describe('side-nav-item', () => {
       toggle.click();
       expect(spy.called).to.be.false;
     });
+
+    describe('target property', () => {
+      it('should set target attribute to the anchor when target is set', async () => {
+        item.target = '_blank';
+        await nextRender();
+        expect(anchor.getAttribute('target')).to.be.equal('_blank');
+      });
+
+      it('should remove target attribute from the anchor when target is removed', async () => {
+        item.target = '_blank';
+        await nextRender();
+        item.target = null;
+        await nextRender();
+        expect(anchor.hasAttribute('target')).to.be.not.ok;
+      });
+    });
   });
 });