feat: add hint to navigation menu #1216, #1312

zyfra · Jan 26, 2024 · bdacd4f · bdacd4f
1 parent d747ce1
commit bdacd4f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/...tion-menu/components/prizm-navigation-menu-item/prizm-navigation-menu-item.component.html b/...tion-menu/components/prizm-navigation-menu-item/prizm-navigation-menu-item.component.html
@@ -4,6 +4,8 @@
  [class.prizm-navigation-menu-item_hovered]="isHovered"
  [class.prizm-navigation-menu-item_expandable]="isExpandable"
  [tabindex]="0"
+ [prizmHint]="item.text"
+ [prizmHintCanShow]="prizmIsTextOverflow(elem)"
  (keydown.space)="interaction.emit(item)"
  (keydown.enter)="interaction.emit(item)"
  (click)="interaction.emit(item)"
@@ -14,7 +16,7 @@
  *ngIf="item.icon"
  [name]="item.icon"
  ></prizm-icons-svg>
- <p class="prizm-navigation-menu-item__text">
+ <p class="prizm-navigation-menu-item__text" #elem>
  {{ item.text }}
  </p>
  <div class="prizm-navigation-menu-item__extra">

diff --git a/...gation-menu/components/prizm-navigation-menu-item/prizm-navigation-menu-item.component.ts b/...gation-menu/components/prizm-navigation-menu-item/prizm-navigation-menu-item.component.ts
@@ -11,9 +11,11 @@ import { InternalPrizmNavigationMenuItem, ViewMode } from '../../interfaces';
 import { PrizmAbstractTestId } from '@prizm-ui/core';
 import { PrizmIconsSvgModule } from '@prizm-ui/icons';
 import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { PrizmButtonModule } from '../../../button/button.module';
 import { PrizmInputCommonModule } from '../../../input/common/input-common.module';
 import { PrizmHoveredModule } from '../../../../directives/hovered';
+import { PrizmHintDirective } from '../../../../directives';
+import { PrizmButtonComponent } from '../../../button';
+import { prizmIsTextOverflow } from '../../../../util';
 
 @Component({
  selector: 'prizm-navigation-menu-item',
@@ -27,7 +29,8 @@ import { PrizmHoveredModule } from '../../../../directives/hovered';
  NgIf,
  NgTemplateOutlet,
  PrizmInputCommonModule,
- PrizmButtonModule,
+ PrizmButtonComponent,
+ PrizmHintDirective,
  ],
 })
 export class PrizmNavigationMenuItemComponent<T> extends PrizmAbstractTestId {
@@ -44,7 +47,8 @@ export class PrizmNavigationMenuItemComponent<T> extends PrizmAbstractTestId {
  @Input() mode!: ViewMode;
  @Input() showGoToButtons!: boolean;
 
- isHovered = false;
+ public readonly prizmIsTextOverflow = prizmIsTextOverflow;
+ public isHovered = false;
 
  get expandButtonVisible(): boolean {
  return this.mode === 'rubricator' ? !!this.item.isRubricator : this.isExpandable;