feat(core): add dropdown offsets to TUI_DROPDOWN_OPTIONS

taiga-family · Dec 1, 2022 · 710651c · 710651c
1 parent 1d78810
commit 710651c
Show file tree

Hide file tree

Showing 21 changed files with 59 additions and 37 deletions.
diff --git a/projects/core/directives/dropdown/dropdown-options.directive.ts b/projects/core/directives/dropdown/dropdown-options.directive.ts
@@ -16,17 +16,14 @@ import {
 } from '@taiga-ui/core/types';
 import {tuiOverrideOptions} from '@taiga-ui/core/utils';
 
-/**
- * Safe space around host and screen edges
- */
-export const TUI_DROPDOWN_OFFSET = 4;
-
 export interface TuiDropdownOptions {
     readonly align: TuiHorizontalDirection;
     readonly direction: TuiVerticalDirection | null;
     readonly limitWidth: TuiDropdownWidth;
     readonly minHeight: number;
     readonly maxHeight: number;
+    readonly verticalOffset: number;
+    readonly horizontalOffset: number;
 }
 
 /** Default values for dropdown options */
@@ -36,6 +33,8 @@ export const TUI_DROPDOWN_DEFAULT_OPTIONS: TuiDropdownOptions = {
     limitWidth: `auto`,
     maxHeight: 400,
     minHeight: 80,
+    verticalOffset: 4,
+    horizontalOffset: 4,
 };
 
 export const TUI_DROPDOWN_OPTIONS = new InjectionToken<TuiDropdownOptions>(
@@ -57,7 +56,7 @@ export const tuiDropdownOptionsProvider: (
 });
 
 @Directive({
-    selector: `[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight]`,
+    selector: `[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownVerticalOffset], [tuiDropdownHorizontalOffset]`,
     providers: [
         {
             provide: TUI_DROPDOWN_OPTIONS,
@@ -86,6 +85,14 @@ export class TuiDropdownOptionsDirective implements TuiDropdownOptions {
     @tuiDefaultProp()
     maxHeight = this.options.maxHeight;
 
+    @Input(`tuiDropdownVerticalOffset`)
+    @tuiDefaultProp()
+    verticalOffset = this.options.verticalOffset;
+
+    @Input(`tuiDropdownHorizontalOffset`)
+    @tuiDefaultProp()
+    horizontalOffset = this.options.horizontalOffset;
+
     constructor(
         @SkipSelf()
         @Inject(TUI_DROPDOWN_OPTIONS)

diff --git a/projects/core/directives/dropdown/dropdown-position-sided.directive.ts b/projects/core/directives/dropdown/dropdown-position-sided.directive.ts
@@ -7,11 +7,7 @@ import {
 } from '@taiga-ui/core/abstract';
 import {TuiPoint} from '@taiga-ui/core/types';
 
-import {
-    TUI_DROPDOWN_OFFSET,
-    TUI_DROPDOWN_OPTIONS,
-    TuiDropdownOptions,
-} from './dropdown-options.directive';
+import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.directive';
 import {TuiDropdownPositionDirective} from './dropdown-position.directive';
 
 @Directive({
@@ -46,15 +42,15 @@ export class TuiDropdownPositionSidedDirective implements TuiPositionAccessor {
         const {align, direction, minHeight} = this.options;
         const available = {
             top: hostRect.bottom,
-            left: hostRect.left - TUI_DROPDOWN_OFFSET,
-            right: innerWidth - hostRect.right - TUI_DROPDOWN_OFFSET,
+            left: hostRect.left - this.options.horizontalOffset,
+            right: innerWidth - hostRect.right - this.options.horizontalOffset,
             bottom: innerHeight - hostRect.top,
         } as const;
         const position = {
-            top: hostRect.bottom - height + 2 * TUI_DROPDOWN_OFFSET + 1, // 1 for border
-            left: hostRect.left - width - TUI_DROPDOWN_OFFSET,
-            right: hostRect.right + TUI_DROPDOWN_OFFSET,
-            bottom: hostRect.top - 2 * TUI_DROPDOWN_OFFSET - 1, // 1 for border
+            top: hostRect.bottom - height + 2 * this.options.verticalOffset + 1, // 1 for border
+            left: hostRect.left - width - this.options.horizontalOffset,
+            right: hostRect.right + this.options.horizontalOffset,
+            bottom: hostRect.top - 2 * this.options.verticalOffset - 1, // 1 for border
         } as const;
         const better = available.top > available.bottom ? `top` : `bottom`;
         const maxLeft = available.left > available.right ? position.left : position.right;

diff --git a/projects/core/directives/dropdown/dropdown-position.directive.ts b/projects/core/directives/dropdown/dropdown-position.directive.ts
@@ -7,11 +7,7 @@ import {
 } from '@taiga-ui/core/abstract';
 import {TuiPoint, TuiVerticalDirection} from '@taiga-ui/core/types';
 
-import {
-    TUI_DROPDOWN_OFFSET,
-    TUI_DROPDOWN_OPTIONS,
-    TuiDropdownOptions,
-} from './dropdown-options.directive';
+import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.directive';
 
 @Directive({
     selector: `[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])`,
@@ -31,17 +27,17 @@ export class TuiDropdownPositionDirective implements TuiPositionAccessor {
         const {innerHeight, innerWidth} = this.windowRef;
         const {minHeight, align, direction} = this.options;
         const previous = this.previous || direction || `bottom`;
-        const right = Math.max(hostRect.right - width, TUI_DROPDOWN_OFFSET);
+        const right = Math.max(hostRect.right - width, this.options.horizontalOffset);
         const available = {
-            top: hostRect.top - 2 * TUI_DROPDOWN_OFFSET,
-            bottom: innerHeight - hostRect.bottom - 2 * TUI_DROPDOWN_OFFSET,
+            top: hostRect.top - 2 * this.options.verticalOffset,
+            bottom: innerHeight - hostRect.bottom - 2 * this.options.verticalOffset,
         } as const;
         const position = {
-            top: hostRect.top - TUI_DROPDOWN_OFFSET - height,
-            bottom: hostRect.bottom + TUI_DROPDOWN_OFFSET,
+            top: hostRect.top - this.options.verticalOffset - height,
+            bottom: hostRect.bottom + this.options.verticalOffset,
             right,
             left:
-                hostRect.left + width < innerWidth - TUI_DROPDOWN_OFFSET
+                hostRect.left + width < innerWidth - this.options.horizontalOffset
                     ? hostRect.left
                     : right,
         } as const;

diff --git a/projects/core/directives/dropdown/dropdown.component.ts b/projects/core/directives/dropdown/dropdown.component.ts
@@ -27,11 +27,7 @@ import {takeUntil} from 'rxjs/operators';
 // eslint-disable-next-line import/no-cycle
 import {TuiDropdownDirective} from './dropdown.directive';
 import {TuiDropdownHoverDirective} from './dropdown-hover.directive';
-import {
-    TUI_DROPDOWN_OFFSET,
-    TUI_DROPDOWN_OPTIONS,
-    TuiDropdownOptions,
-} from './dropdown-options.directive';
+import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.directive';
 
 /**
  *  This component is used to show template in a portal using default style of white rounded box with a shadow
@@ -104,13 +100,13 @@ export class TuiDropdownComponent {
         const isIntersecting =
             left < rect.right &&
             right > rect.left &&
-            top < offsetY + 2 * TUI_DROPDOWN_OFFSET;
+            top < offsetY + 2 * this.options.verticalOffset;
         const available = isIntersecting
-            ? rect.top - 2 * TUI_DROPDOWN_OFFSET
-            : offsetY + innerHeight - top - TUI_DROPDOWN_OFFSET;
+            ? rect.top - 2 * this.options.verticalOffset
+            : offsetY + innerHeight - top - this.options.verticalOffset;
 
         style.position = position;
-        style.top = tuiPx(Math.max(top, offsetY + TUI_DROPDOWN_OFFSET));
+        style.top = tuiPx(Math.max(top, offsetY + this.options.verticalOffset));
         style.left = tuiPx(left);
         style.maxHeight = tuiPx(Math.min(maxHeight, available));
         style.width = ``;

diff --git a/projects/demo/src/modules/app/autogenerated-code-hints/autogenerated-code-hints.component.ts b/projects/demo/src/modules/app/autogenerated-code-hints/autogenerated-code-hints.component.ts
@@ -17,6 +17,8 @@ const DROPDOWN_CONTROLLER_SELECTORS = [
     `tuiDropdownLimitWidth`,
     `tuiDropdownMinHeight`,
     `tuiDropdownMaxHeight`,
+    `tuiDropdownHorizontalOffset`,
+    `tuiDropdownVerticalOffset`,
 ];
 
 @Component({

diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts
@@ -139,6 +139,8 @@ export abstract class AbstractExampleTuiControl
 
     dropdownMaxHeight = TUI_DROPDOWN_DEFAULT_OPTIONS.maxHeight;
 
+    dropdownVerticalOffset = TUI_DROPDOWN_DEFAULT_OPTIONS.verticalOffset;
+
     get customContent(): PolymorpheusContent {
         return this.customContentSelected === CUSTOM_SVG_NAME
             ? CUSTOM_SVG

diff --git a/...c/modules/components/abstract/dropdown-documentation/dropdown-documentation.template.html b/...c/modules/components/abstract/dropdown-documentation/dropdown-documentation.template.html
@@ -69,4 +69,13 @@
     >
         Maximum height of dropdown
     </ng-template>
+    <ng-template
+        i18n
+        documentationPropertyName="dropdownVerticalOffset"
+        documentationPropertyMode="input"
+        documentationPropertyType="number"
+        [(documentationPropertyValue)]="documentedComponent.dropdownVerticalOffset"
+    >
+        Dropdown vertical offset
+    </ng-template>
 </tui-doc-documentation>
diff --git a/projects/demo/src/modules/components/abstract/dropdown.ts b/projects/demo/src/modules/components/abstract/dropdown.ts
@@ -24,4 +24,5 @@ export abstract class AbstractExampleTuiDropdown {
     dropdownLimitWidth = TUI_DROPDOWN_DEFAULT_OPTIONS.limitWidth;
     dropdownMinHeight = TUI_DROPDOWN_DEFAULT_OPTIONS.minHeight;
     dropdownMaxHeight = TUI_DROPDOWN_DEFAULT_OPTIONS.maxHeight;
+    dropdownVerticalOffset = TUI_DROPDOWN_DEFAULT_OPTIONS.verticalOffset;
 }
diff --git a/projects/demo/src/modules/components/combo-box/combo-box.template.html b/projects/demo/src/modules/components/combo-box/combo-box.template.html
@@ -99,6 +99,7 @@
                     [tuiDropdownLimitWidth]="dropdownLimitWidth"
                     [tuiDropdownMinHeight]="dropdownMinHeight"
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
+                    [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
                     [tuiHintAppearance]="hintAppearance"

diff --git a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html
@@ -68,6 +68,7 @@
                 [tuiDropdownLimitWidth]="dropdownLimitWidth"
                 [tuiDropdownMinHeight]="dropdownMinHeight"
                 [tuiDropdownMaxHeight]="dropdownMaxHeight"
+                [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                 [(open)]="open"
             >
                 <tui-input

diff --git a/.../src/modules/components/input-phone-international/input-phone-international.template.html b/.../src/modules/components/input-phone-international/input-phone-international.template.html
@@ -37,6 +37,7 @@
                     [tuiDropdownDirection]="dropdownDirection"
                     [tuiDropdownMinHeight]="dropdownMinHeight"
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
+                    [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
                     [tuiHintAppearance]="hintAppearance"

diff --git a/projects/demo/src/modules/components/input-phone/input-phone.template.html b/projects/demo/src/modules/components/input-phone/input-phone.template.html
@@ -68,6 +68,7 @@
                     [tuiDropdownLimitWidth]="dropdownLimitWidth"
                     [tuiDropdownMinHeight]="dropdownMinHeight"
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
+                    [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
                     [tuiHintAppearance]="hintAppearance"

diff --git a/projects/demo/src/modules/components/input-tag/input-tag.template.html b/projects/demo/src/modules/components/input-tag/input-tag.template.html
@@ -92,6 +92,7 @@
                     [tuiDropdownLimitWidth]="dropdownLimitWidth"
                     [tuiDropdownMinHeight]="dropdownMinHeight"
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
+                    [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
                     [tuiHintAppearance]="hintAppearance"

diff --git a/projects/demo/src/modules/components/input-time/input-time.template.html b/projects/demo/src/modules/components/input-time/input-time.template.html
@@ -69,6 +69,7 @@
                     [tuiDropdownLimitWidth]="dropdownLimitWidth"
                     [tuiDropdownMinHeight]="dropdownMinHeight"
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
+                    [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                     [items]="items"
                     [itemSize]="itemSize"
                     [tuiTextfieldCleaner]="cleaner"

diff --git a/projects/demo/src/modules/components/input/input.template.html b/projects/demo/src/modules/components/input/input.template.html
@@ -245,6 +245,7 @@
                     [tuiDropdownLimitWidth]="dropdownLimitWidth"
                     [tuiDropdownMinHeight]="dropdownMinHeight"
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
+                    [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                     [tuiHintContent]="hintContent"
                     [tuiHintDirection]="hintDirection"
                     [tuiHintAppearance]="hintAppearance"

diff --git a/projects/demo/src/modules/components/multi-select/multi-select.template.html b/projects/demo/src/modules/components/multi-select/multi-select.template.html
@@ -100,6 +100,7 @@
                     [tuiDropdownLimitWidth]="dropdownLimitWidth"
                     [tuiDropdownMinHeight]="dropdownMinHeight"
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
+                    [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                     [tuiTextfieldCleaner]="cleaner"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"

diff --git a/projects/demo/src/modules/components/select/select.template.html b/projects/demo/src/modules/components/select/select.template.html
@@ -137,6 +137,7 @@
                     [tuiDropdownLimitWidth]="dropdownLimitWidth"
                     [tuiDropdownMinHeight]="dropdownMinHeight"
                     [tuiDropdownMaxHeight]="dropdownMaxHeight"
+                    [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                     [tuiTextfieldCleaner]="cleaner"
                     [tuiTextfieldCustomContent]="customContent"
                     [tuiTextfieldLabelOutside]="labelOutside"

diff --git a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.html b/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.html
@@ -68,6 +68,7 @@ <h3>To close dropdown:</h3>
                 [tuiDropdownAlign]="dropdownAlign"
                 [tuiDropdownDirection]="dropdownDirection"
                 [tuiDropdownLimitWidth]="dropdownLimitWidth"
+                [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
             >
                 Right click on me to
                 <strong>see a dropdown</strong>

diff --git a/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.template.html b/projects/demo/src/modules/directives/dropdown-hover/dropdown-hover.template.html
@@ -40,6 +40,7 @@
                 [tuiDropdownAlign]="dropdownAlign"
                 [tuiDropdownDirection]="dropdownDirection"
                 [tuiDropdownLimitWidth]="dropdownLimitWidth"
+                [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
             >
                 Hover pointer over
                 <strong>to see a dropdown</strong>

diff --git a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.template.html b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.template.html
@@ -39,6 +39,7 @@
                 [tuiDropdownAlign]="dropdownAlign"
                 [tuiDropdownDirection]="dropdownDirection"
                 [tuiDropdownLimitWidth]="dropdownLimitWidth"
+                [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
             >
                 Select a text to
                 <strong>see a dropdown</strong>

diff --git a/projects/demo/src/modules/directives/dropdown/dropdown.template.html b/projects/demo/src/modules/directives/dropdown/dropdown.template.html
@@ -70,6 +70,7 @@
                     [tuiDropdownDirection]="dropdownDirection"
                     [tuiDropdownLimitWidth]="dropdownLimitWidth"
                     [tuiDropdownManual]="open"
+                    [tuiDropdownVerticalOffset]="dropdownVerticalOffset"
                     (tuiObscured)="onObscured($event)"
                     (click)="onClick()"
                 >