Skip to content

fix(docs-infra): align and highlight external-link icon in nav sidebar#69497

Open
erkamyaman wants to merge 1 commit into
angular:mainfrom
erkamyaman:docs-nav-external-link-icon-align-hover
Open

fix(docs-infra): align and highlight external-link icon in nav sidebar#69497
erkamyaman wants to merge 1 commit into
angular:mainfrom
erkamyaman:docs-nav-external-link-icon-align-hover

Conversation

@erkamyaman

Copy link
Copy Markdown
Contributor

The open_in_new icon on external navigation items stayed grey on hover and sat inset from the chevron column, so it never matched the chevron items visually.

  • Add a hover rule so the icon brightens to --primary-contrast along with the label, matching the chevron/text behaviour.
  • Override the 1rem max-width reserve inherited from .docs-faceted-list-item-text by chaining both classes the span carries (.docs-external-link.docs-faceted-list-item-text), so the icon lines up with the chevrons at the link's end-padding. Using :host was avoided because it breaks the nested a:hover & selector.

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

On external navigation items in the docs sidebar, the open_in_new icon stayed grey on hover (while the label brightened) and sat inset from the chevron column, so external items did not align with the chevron items above them.

image

What is the new behavior?

The external-link icon now brightens to --primary-contrast on hover along with its label, and its right edge aligns with the chevron column at the link's end-padding.

image

Does this PR introduce a breaking change?

  • Yes
  • No

@pullapprove pullapprove Bot requested a review from atscott June 24, 2026 11:20
@angular-robot angular-robot Bot added the area: docs Related to the documentation label Jun 24, 2026
@ngbot ngbot Bot added this to the Backlog milestone Jun 24, 2026
@erkamyaman erkamyaman marked this pull request as draft June 24, 2026 11:21
@JeanMeche JeanMeche requested review from JeanMeche and removed request for atscott June 24, 2026 11:22
The open_in_new icon on external navigation items stayed grey on hover
and sat inset from the chevron column, so it never matched the chevron
items visually.

- Add a hover rule so the icon brightens to --primary-contrast along
  with the label, matching the chevron/text behaviour.
- Override the 1rem max-width reserve inherited from
  .docs-faceted-list-item-text by chaining both classes the span carries
  (.docs-external-link.docs-faceted-list-item-text), so the icon lines up
  with the chevrons at the link's end-padding. Using :host was avoided
  because it breaks the nested `a:hover &` selector.
@erkamyaman erkamyaman force-pushed the docs-nav-external-link-icon-align-hover branch from 69ddf1d to c42b3d1 Compare June 24, 2026 11:22
@angular-robot angular-robot Bot added the area: docs-infra Angular.dev application and infrastructure label Jun 24, 2026
@erkamyaman erkamyaman changed the title fix(docs): align and highlight external-link icon in nav sidebar fix(docs-infra): align and highlight external-link icon in nav sidebar Jun 24, 2026
@erkamyaman erkamyaman marked this pull request as ready for review June 24, 2026 11:23
@erkamyaman

erkamyaman commented Jun 24, 2026

Copy link
Copy Markdown
Contributor Author

I had to change the commit header, could you please rerun the preview tests? So sorry 🙏 @JeanMeche

@github-actions

Copy link
Copy Markdown

Deployed adev-preview for c42b3d1 to: https://ng-dev-previews-fw--pr-angular-angular-69497-adev-prev-zaurbufa.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

adev: preview area: docs Related to the documentation area: docs-infra Angular.dev application and infrastructure

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants