fix(core): fix custom hint (#9776)

taiga-family · Nov 20, 2024 · ae83d2d · ae83d2d
1 parent b97dcd4
commit ae83d2d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/projects/core/directives/hint/hint-unstyled.component.ts b/projects/core/directives/hint/hint-unstyled.component.ts
@@ -1,3 +1,4 @@
+import type {WritableSignal} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -8,6 +9,7 @@ import {
 import type {TuiContext} from '@taiga-ui/cdk/types';
 import {tuiParentAnimation} from '@taiga-ui/core/animations';
 import type {TuiPortalItem} from '@taiga-ui/core/types';
+import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {
     injectContext,
     PolymorpheusComponent,
@@ -19,13 +21,16 @@ import {TuiHintDirective} from './hint.directive';
 @Component({
     standalone: true,
     imports: [PolymorpheusOutlet],
-    template: '<ng-container *polymorpheusOutlet="context.$implicit.content" />',
+    template: '<ng-container *polymorpheusOutlet="context.$implicit.content()" />',
     changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [tuiParentAnimation],
     host: {'[@tuiParentAnimation]': ''},
 })
 export class TuiHintUnstyledComponent {
-    protected readonly context = injectContext<TuiContext<TuiPortalItem>>();
+    protected readonly context =
+        injectContext<
+            TuiContext<TuiPortalItem & {content: WritableSignal<PolymorpheusContent>}>
+        >();
 }
 
 @Directive({

diff --git a/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts b/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts
@@ -132,4 +132,13 @@ test.describe('TuiHint', () => {
 
         await expect(page).toHaveScreenshot('06-hint-direction__left.png');
     });
+
+    test('TuiHint customizing works', async ({page}) => {
+        await tuiGoto(page, DemoRoute.Hint);
+        const example = new TuiDocumentationPagePO(page).getExample('#customizing');
+
+        await example.locator('tui-avatar').hover();
+
+        await expect(example).toHaveScreenshot('07-hint.png');
+    });
 });
diff --git a/projects/demo/src/modules/directives/hint/examples/2/index.html b/projects/demo/src/modules/directives/hint/examples/2/index.html
@@ -1,6 +1,7 @@
 <tui-avatar
     size="l"
     tuiHint
+    tuiHintDirection="right"
     [style.background]="'❤' | tuiAutoColor"
 >
     ❤