fix(tooltip): tooltip in navbar (#DS-2909) (#308)

Author: lskramarov

packages/components-dev/navbar/module.ts

@@ -8,13 +8,13 @@ import { PopUpPlacements } from '@koobiq/components/core';
 import { KbqDividerModule } from '@koobiq/components/divider';
 import { KbqDropdownModule } from '@koobiq/components/dropdown';
 import { KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqInputModule } from '@koobiq/components/input';
 import { KbqLinkModule } from '@koobiq/components/link';
 import { KbqModalModule, KbqModalRef, KbqModalService } from '@koobiq/components/modal';
+import { KbqNavbar, KbqNavbarModule } from '@koobiq/components/navbar';
 import { KbqPopoverModule } from '@koobiq/components/popover';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
-import { KbqIconModule } from '../../components/icon';
-import { KbqNavbar, KbqNavbarModule } from '../../components/navbar';
 
 @Component({
     selector: 'app',

packages/components/navbar/navbar-item.component.ts

@@ -454,7 +454,8 @@ export class KbqNavbarItem extends KbqTooltipTrigger implements AfterContentInit
         public navbarFocusableItem: KbqNavbarFocusableItem,
         private changeDetectorRef: ChangeDetectorRef,
         @Optional() private dropdownTrigger: KbqDropdownTrigger,
-        @Optional() private bento: KbqNavbarBento
+        @Optional() private bento: KbqNavbarBento,
+        @Optional() private tooltip: KbqTooltipTrigger
     ) {
         super();
 
@@ -471,6 +472,13 @@ export class KbqNavbarItem extends KbqTooltipTrigger implements AfterContentInit
         this._trigger = `${PopUpTriggers.Hover}`;
 
         this.navbarFocusableItem.setTooltip(this);
+
+        if (this.tooltip) {
+            this.tooltip.arrow = false;
+            this.tooltip.offset = 0;
+
+            this.tooltip['overlayConfig'].panelClass = 'kbq-tooltip-panel_horizontal-navbar';
+        }
     }
 
     ngAfterContentInit(): void {

packages/components/tooltip/tooltip.scss

@@ -10,6 +10,32 @@
 $trigger-margin: 8px;
 $trigger-margin_without-arrow: 4px;
 
+.kbq-tooltip-panel_horizontal-navbar {
+    &:has(.kbq-tooltip_placement-top),
+    &:has(.kbq-tooltip_placement-top-left),
+    &:has(.kbq-tooltip_placement-top-right) {
+        margin-bottom: 9px;
+    }
+
+    &:has(.kbq-tooltip_placement-right),
+    &:has(.kbq-tooltip_placement-right-top),
+    &:has(.kbq-tooltip_placement-right-bottom) {
+        margin-left: 9px;
+    }
+
+    &:has(.kbq-tooltip_placement-bottom),
+    &:has(.kbq-tooltip_placement-bottom-left),
+    &:has(.kbq-tooltip_placement-bottom-right) {
+        margin-top: 9px;
+    }
+
+    &:has(.kbq-tooltip_placement-left),
+    &:has(.kbq-tooltip_placement-left-top),
+    &:has(.kbq-tooltip_placement-left-bottom) {
+        margin-right: 9px;
+    }
+}
+
 .kbq-tooltip__inner {
     border-radius: kbq-css-variable(tooltip-size-border-radius);
     word-break: break-word;

tools/public_api_guard/components/navbar.api.md

@@ -194,7 +194,7 @@ export interface KbqNavbarFocusableItemEvent {
 
 // @public (undocumented)
 export class KbqNavbarItem extends KbqTooltipTrigger implements AfterContentInit {
-    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
+    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento, tooltip: KbqTooltipTrigger);
     // (undocumented)
     get collapsable(): boolean;
     set collapsable(value: boolean);
@@ -241,7 +241,7 @@ export class KbqNavbarItem extends KbqTooltipTrigger implements AfterContentInit
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "*"], false, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
 }
 
 // @public (undocumented)