feat(core): tuiHintDirection priority list (#9669)

taiga-family · Nov 5, 2024 · bbf13b5 · bbf13b5
1 parent efa3615
commit bbf13b5
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 14 deletions.
diff --git a/projects/core/directives/hint/hint-options.directive.ts b/projects/core/directives/hint/hint-options.directive.ts
@@ -36,7 +36,7 @@ export const TUI_HINT_DIRECTIONS: readonly TuiHintDirection[] = [
 
 export interface TuiHintOptions {
     readonly appearance: string;
-    readonly direction: TuiHintDirection;
+    readonly direction: TuiHintDirection | TuiHintDirection[];
     readonly hideDelay: number;
     readonly icon: string;
     readonly showDelay: number;

diff --git a/projects/core/directives/hint/hint-position.directive.ts b/projects/core/directives/hint/hint-position.directive.ts
@@ -75,11 +75,12 @@ export class TuiHintPosition extends TuiPositionAccessor {
         this.points['right-bottom'][TOP] = this.points['left-bottom'][TOP];
         this.points['right-bottom'][LEFT] = this.points['right-top'][LEFT];
 
-        if (this.checkPosition(this.points[this.direction], width, height)) {
-            return this.points[this.direction];
-        }
+        const priorityDirections = Array.isArray(this.direction)
+            ? this.direction
+            : [this.direction];
+        const sortedDirections = priorityDirections.concat(TUI_HINT_DIRECTIONS);
 
-        const direction = TUI_HINT_DIRECTIONS.find((direction) =>
+        const direction = sortedDirections.find((direction) =>
             this.checkPosition(this.points[direction], width, height),
         );
 

diff --git a/projects/demo-playwright/tests/core/hint/hint.spec.ts b/projects/demo-playwright/tests/core/hint/hint.spec.ts
@@ -1,7 +1,7 @@
 import {DemoRoute} from '@demo/routes';
 import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
 import {expect, test} from '@playwright/test';
-import type {TuiHintDirection} from '@taiga-ui/core';
+import type {TuiHintOptions} from '@taiga-ui/core';
 
 test.describe('TuiHint', () => {
     test('TuiHint works', async ({page}) => {
@@ -14,7 +14,7 @@ test.describe('TuiHint', () => {
     });
 
     test.describe('Manual hint works', () => {
-        const directions: readonly TuiHintDirection[] = [
+        const directions: Array<TuiHintOptions['direction']> = [
             'bottom-left',
             'bottom-right',
             'bottom',
@@ -27,17 +27,18 @@ test.describe('TuiHint', () => {
             'top-left',
             'top-right',
             'top',
+            ['bottom', 'left'],
         ];
 
-        directions.forEach((direction) => {
+        directions.forEach((direction, directionIndex) => {
             [256, 1280].forEach((width) => {
                 test(`tuiHintDirection is ${direction}, viewport width is ${width}px`, async ({
                     page,
                 }) => {
                     await page.setViewportSize({width, height: 300});
                     await tuiGoto(
                         page,
-                        `/directives/hint-manual/API?tuiHintManual=true&tuiHintDirection=${direction}`,
+                        `/directives/hint-manual/API?tuiHintManual=true&tuiHintDirection$=${directionIndex}`,
                     );
                     await new TuiDocumentationPagePO(page).prepareBeforeScreenshot();
 
@@ -115,4 +116,20 @@ test.describe('TuiHint', () => {
 
         await expect(example).toHaveScreenshot('05-tooltip-bottom.png');
     });
+
+    test('Hint direction with priority -> bottom, left', async ({page}) => {
+        await page.setViewportSize({width: 1280, height: 300});
+        await tuiGoto(
+            page,
+            '/directives/hint-manual/API?tuiHintManual=true&tuiHintDirection$=12',
+        );
+
+        await new TuiDocumentationPagePO(page).prepareBeforeScreenshot();
+
+        await expect(page).toHaveScreenshot('06-hint-direction__bottom.png');
+
+        await page.setViewportSize({width: 1280, height: 150});
+
+        await expect(page).toHaveScreenshot('06-hint-direction__left.png');
+    });
 });
diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts
@@ -2,6 +2,7 @@ import type {AbstractControl} from '@angular/forms';
 import type {
     TuiDropdownAlign,
     TuiDropdownWidth,
+    TuiHintDirection,
     TuiSizeL,
     TuiSizeS,
     TuiVerticalDirection,
@@ -34,7 +35,10 @@ export abstract class AbstractExampleTuiControl
 
     public readonly hintContentVariants: readonly string[] = ['', 'Some content'];
 
-    public readonly hintDirectionVariants = TUI_HINT_DIRECTIONS;
+    public readonly hintDirectionVariants = [
+        ...TUI_HINT_DIRECTIONS,
+        ['bottom', 'left'] satisfies TuiHintDirection[],
+    ];
 
     public readonly hintAppearanceVariants = ['', 'error', 'dark'];
 

diff --git a/projects/demo/src/modules/components/abstract/hint-controller-documentation/index.html b/projects/demo/src/modules/components/abstract/hint-controller-documentation/index.html
@@ -27,7 +27,7 @@ <h6 class="tui-text_h6">
     <ng-template
         documentationPropertyMode="input"
         documentationPropertyName="tuiHintDirection"
-        documentationPropertyType="TuiHintDirection"
+        documentationPropertyType="TuiHintDirection | TuiHintDirection[]"
         [documentationPropertyValues]="documentedComponent.hintDirectionVariants"
         [(documentationPropertyValue)]="documentedComponent.hintDirection"
     >

diff --git a/projects/demo/src/modules/components/abstract/hint.ts b/projects/demo/src/modules/components/abstract/hint.ts
@@ -1,11 +1,15 @@
+import type {TuiHintDirection} from '@taiga-ui/core';
 import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core';
 
 export abstract class AbstractExampleTuiHint {
     public readonly appearanceVariants = ['', 'error', 'dark'];
 
     public appearance = this.appearanceVariants[0]!;
 
-    public readonly directionVariants = TUI_HINT_DIRECTIONS;
+    public readonly directionVariants = [
+        ...TUI_HINT_DIRECTIONS,
+        ['bottom', 'left'] satisfies TuiHintDirection[],
+    ];
 
     public direction = this.directionVariants[0]!;
 }
diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/index.html b/projects/demo/src/modules/components/abstract/inherited-documentation/index.html
@@ -90,7 +90,7 @@ <h6 class="tui-text_h6">
     <ng-template
         documentationPropertyMode="input"
         documentationPropertyName="tuiHintDirection"
-        documentationPropertyType="TuiHintDirection"
+        documentationPropertyType="TuiHintDirection | TuiHintDirection[]"
         [documentationPropertyValues]="directionVariants"
         [(documentationPropertyValue)]="documentedComponent.direction"
     >

diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts b/projects/demo/src/modules/components/abstract/inherited-documentation/index.ts
@@ -5,6 +5,7 @@ import {
     TuiDocDocumentation,
     TuiDocDocumentationPropertyConnector,
 } from '@taiga-ui/addon-doc';
+import type {TuiHintDirection} from '@taiga-ui/core';
 import {TUI_HINT_DIRECTIONS} from '@taiga-ui/core';
 
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract-props-accessor';
@@ -35,7 +36,11 @@ import {TextfieldControllerDocumentation} from '../textfield-controller-document
 })
 export class InheritedDocumentation {
     protected readonly booleanVariants: readonly boolean[] = [false, true];
-    protected readonly directionVariants = TUI_HINT_DIRECTIONS;
+    protected readonly directionVariants = [
+        ...TUI_HINT_DIRECTIONS,
+        ['bottom', 'left'] satisfies TuiHintDirection[],
+    ];
+
     protected readonly appearanceVariants = ['', 'error', 'dark'];
     protected readonly documentedComponent = inject(ABSTRACT_PROPS_ACCESSOR);