fix(kit): MarkerIcon only show hover state for interactive elements (…

…taiga-family#2950)
theorlovsky · Oct 24, 2022 · 90da7d5 · 90da7d5
1 parent e17346d
commit 90da7d5
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 11 deletions.
diff --git a/projects/demo-integrations/cypress/tests/core/marker-icon/marker-icon.cy.ts b/projects/demo-integrations/cypress/tests/core/marker-icon/marker-icon.cy.ts
@@ -0,0 +1,20 @@
+describe(`tuiMarkerIcon`, () => {
+    it(`link`, () => {
+        cy.tuiVisit(`/components/marker-icon#modes`);
+
+        cy.get(`tui-doc-example[heading="modes"]`)
+            .findByAutomationId(`tui-doc-example`)
+            .tuiScrollIntoView()
+            .as(`content`);
+
+        cy.get(`@content`).should(`be.visible`).matchImageSnapshot();
+
+        cy.get(`@content`)
+            .find(`a[tuiMarkerIcon]`)
+            .trigger(`mouseover`)
+            .trigger(`mouseenter`)
+            .invoke(`show`)
+            .click() // emulate hover
+            .matchImageSnapshot();
+    });
+});
diff --git a/projects/demo/src/modules/components/marker-icon/examples/2/index.html b/projects/demo/src/modules/components/marker-icon/examples/2/index.html
@@ -3,11 +3,12 @@
     src="tuiIconBellLarge"
     class="tui-space_right-2"
 ></tui-marker-icon>
-<tui-marker-icon
+<a
+    tuiMarkerIcon
     mode="link"
     src="tuiIconBellLarge"
     class="tui-space_right-2"
-></tui-marker-icon>
+></a>
 <tui-marker-icon
     mode="success"
     src="tuiIconBellLarge"

diff --git a/projects/kit/components/marker-icon/marker-icon.component.ts b/projects/kit/components/marker-icon/marker-icon.component.ts
@@ -17,7 +17,7 @@ import {TuiMarkerIconMode} from '@taiga-ui/kit/types';
 import {Observable} from 'rxjs';
 
 @Component({
-    selector: `tui-marker-icon`,
+    selector: `tui-marker-icon, a[tuiMarkerIcon], button[tuiMarkerIcon]`,
     templateUrl: `./marker-icon.template.html`,
     styleUrls: [`./marker-icon.style.less`],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/projects/kit/components/marker-icon/marker-icon.style.less b/projects/kit/components/marker-icon/marker-icon.style.less
@@ -81,18 +81,22 @@
 
     &[data-marker-mode='link'] {
         .transition(color);
-        cursor: pointer;
         color: var(--tui-link);
         background-color: var(--tui-secondary);
 
-        &:hover {
-            color: var(--tui-link-hover);
-            background-color: var(--tui-secondary-hover);
-        }
+        a&,
+        button& {
+            cursor: pointer;
+
+            &:hover {
+                color: var(--tui-link-hover);
+                background-color: var(--tui-secondary-hover);
+            }
 
-        &:active {
-            color: var(--tui-link-hover);
-            background-color: var(--tui-secondary-active);
+            &:active {
+                color: var(--tui-link-hover);
+                background-color: var(--tui-secondary-active);
+            }
         }
     }
 }