Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

docs(docs-infra): add a tooltip to show the full text when nav item text is lengthy (#59038)

Browse source 
PR Close #59038
This commit is contained in:
Hakeem 2025-02-03 13:26:46 -08:00 committed by Miles Malerba
parent e935ff11e2
commit a0dc0cb331
4 changed files with 49 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
adev/shared-docs/components/navigation-list/BUILD.bazel
View file

@ -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",
],
)

32
adev/shared-docs/components/navigation-list/navigation-list.component.html
View file

@ -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>
}

11
adev/shared-docs/components/navigation-list/navigation-list.component.scss
View file

@ -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;
}
}

10
adev/shared-docs/components/navigation-list/navigation-list.component.ts
View file

@ -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,