From a0dc0cb331e5506b2dc3ad016e1afaadddfb2dd4 Mon Sep 17 00:00:00 2001
From: Hakeem <ahmadhakeem1894@outlook.com>
Date: Mon, 3 Feb 2025 13:26:46 -0800
Subject: [PATCH] docs(docs-infra): add a tooltip to show the full text when
 nav item text is lengthy (#59038)

PR Close #59038
---
 .../components/navigation-list/BUILD.bazel    |  3 +-
 .../navigation-list.component.html            | 32 ++++++++++++++++---
 .../navigation-list.component.scss            | 11 ++++++-
 .../navigation-list.component.ts              | 10 +++++-
 4 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/adev/shared-docs/components/navigation-list/BUILD.bazel b/adev/shared-docs/components/navigation-list/BUILD.bazel
index fbc9b896386..986d0f97bc6 100644
--- a/adev/shared-docs/components/navigation-list/BUILD.bazel
+++ b/adev/shared-docs/components/navigation-list/BUILD.bazel
@@ -1,5 +1,5 @@
-load("//tools:defaults.bzl", "karma_web_test_suite", "ng_module", "ts_library")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//tools:defaults.bzl", "karma_web_test_suite", "ng_module", "ts_library")
 
 package(default_visibility = ["//visibility:private"])
 
@@ -23,6 +23,7 @@ ng_module(
         "//packages/common",
         "//packages/core",
         "//packages/router",
+        "@npm//@angular/material",
     ],
 )
 
diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.html b/adev/shared-docs/components/navigation-list/navigation-list.component.html
index bd17756cb0f..fde9bdbb738 100644
--- a/adev/shared-docs/components/navigation-list/navigation-list.component.html
+++ b/adev/shared-docs/components/navigation-list/navigation-list.component.html
@@ -7,7 +7,14 @@
       <li class="docs-faceted-list-item">
         @if (item.path) {
           @if (item.isExternal) {
-            <a [href]="item.path" target="_blank">
+            <a 
+              [href]="item.path" target="_blank"
+              [matTooltip]="item.label"
+              [matTooltipDisabled]="item.label.length < 27"
+              matTooltipPosition="after"
+              [attr.aria-label]="item.label"
+              [matTooltipClass]="'API-tooltip'"
+            >
               <span [class.docs-external-link]="item.isExternal" class="docs-faceted-list-item-text">{{ item.label }}</span>
               @if (item.children && item.level! > 1 && !item.isExpanded) {
                 <docs-icon>chevron_right</docs-icon>
@@ -25,7 +32,12 @@
               }"
               routerLinkActive="docs-faceted-list-item-active"
               (click)="emitClickOnLink()"
-              >
+              [matTooltip]="item.label"
+              [matTooltipDisabled]="item.label.length < 27"
+              matTooltipPosition="after"
+              [attr.aria-label]="item.label"
+              [matTooltipClass]="'API-tooltip'"
+            >
               <span class="docs-faceted-list-item-text">{{item.label}}</span>
               @if (item.children && !item.isExpanded) {
                 <docs-icon>chevron_right</docs-icon>
@@ -35,7 +47,13 @@
         } @else {
           <!-- Nav Section Header -->
           @if (item.level !== collapsableLevel() && item.level !== expandableLevel()) {
-            <div class="docs-secondary-nav-header">
+            <div class="docs-secondary-nav-header"
+              [matTooltip]="item.label"
+              [matTooltipDisabled]="item.label.length < 27"
+              matTooltipPosition="after"
+              [attr.aria-label]="item.label"
+              [matTooltipClass]="'API-tooltip'"
+            >
               <span class="docs-faceted-list-item-text">{{item.label}}</span>
             </div>
           }
@@ -54,7 +72,13 @@
               [class.docs-expanded-button]="item.children && item.level == collapsableLevel()"
               [class.docs-not-expanded-button]="item.children && item.level === expandableLevel()"
               [class.docs-nav-item-has-icon]="
-              item.children && item.level === expandableLevel() && !item.isExpanded">
+              item.children && item.level === expandableLevel() && !item.isExpanded"
+              [matTooltip]="item.label"
+              [matTooltipDisabled]="item.label.length < 27"
+              matTooltipPosition="after"
+              [attr.aria-label]="item.label"
+              [matTooltipClass]="'API-tooltip'"
+            >
               @if (item.children && item.level === collapsableLevel()) {
                 <docs-icon>arrow_back</docs-icon>
               }
diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.scss b/adev/shared-docs/components/navigation-list/navigation-list.component.scss
index 3641a8a0a0d..436867bae04 100644
--- a/adev/shared-docs/components/navigation-list/navigation-list.component.scss
+++ b/adev/shared-docs/components/navigation-list/navigation-list.component.scss
@@ -121,7 +121,7 @@ a,
 
 // Add padding-bottom to last item in the list
 .docs-navigation-list {
-  width: 100%;
+  width: 15rem;
 
   li:last-of-type {
     ul:last-of-type {
@@ -149,4 +149,13 @@ a,
     transition: color 0.3s ease;
     margin-inline-end: 0.4rem;
   }
+}
+
+::ng-deep .API-tooltip{
+  .mat-mdc-tooltip-surface{
+    max-width: unset;
+    width:auto;
+    word-break: keep-all;
+    white-space: pre;
+  }
 }
\ No newline at end of file
diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.ts b/adev/shared-docs/components/navigation-list/navigation-list.component.ts
index d5a26d2a513..8ad8f95f9f1 100644
--- a/adev/shared-docs/components/navigation-list/navigation-list.component.ts
+++ b/adev/shared-docs/components/navigation-list/navigation-list.component.ts
@@ -13,10 +13,18 @@ import {RouterLink, RouterLinkActive} from '@angular/router';
 import {IconComponent} from '../icon/icon.component';
 import {IsActiveNavigationItem} from '../../pipes/is-active-navigation-item.pipe';
 import {NgTemplateOutlet} from '@angular/common';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 @Component({
   selector: 'docs-navigation-list',
-  imports: [RouterLink, RouterLinkActive, IconComponent, IsActiveNavigationItem, NgTemplateOutlet],
+  imports: [
+    RouterLink,
+    RouterLinkActive,
+    IconComponent,
+    IsActiveNavigationItem,
+    NgTemplateOutlet,
+    MatTooltipModule,
+  ],
   templateUrl: './navigation-list.component.html',
   styleUrls: ['./navigation-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,