Skip to content

fix(docs-infra): restyle prefer/avoid code block headers#69646

Merged
leonsenft merged 1 commit into
angular:mainfrom
erkamyaman:docs-infra-prefer-avoid-header-restyle
Jul 6, 2026
Merged

fix(docs-infra): restyle prefer/avoid code block headers#69646
leonsenft merged 1 commit into
angular:mainfrom
erkamyaman:docs-infra-prefer-avoid-header-restyle

Conversation

@erkamyaman

Copy link
Copy Markdown
Contributor

This reworks the styling of the "Prefer" / "Avoid" docs-code block
headers so the two block types are easier to tell apart, and gives every
header variant the same height so the copy button stays centered.

Supersedes #69638, folding in its centering fix for the copy button offset
that #69030 introduced.

closes #69644

PR Checklist

Please check that 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

What is the current behavior?

image image

What is the new behavior?

image image

Does this PR introduce a breaking change?

  • Yes
  • No

The "Prefer" / "Avoid" code block headers rendered the style label as
plain inline text joined to the title with a bare "-" separator, giving
the two block types little visual distinction. The taller label also left
the prefer/avoid header at a different height from the plain filename
header, so the copy button's single "top" value could not center it in
both.

Style the label as a small uppercased pill tinted with the block's style
color, drop the "-" separator, add a subtle inset accent under the header,
and swap the heavier "dangerous" icon on "Avoid" for "close". Give every
header a fixed height with box-sizing: border-box and vertically center
its contents so all variants render at the same height and the copy button
stays centered.

This supersedes angular#69638, folding in its centering fix for the copy button
offset that angular#69030 introduced.
@pullapprove pullapprove Bot requested a review from atscott July 4, 2026 18:29
@angular-robot angular-robot Bot added the area: docs-infra Angular.dev application and infrastructure label Jul 4, 2026
@ngbot ngbot Bot added this to the Backlog milestone Jul 4, 2026
@JeanMeche JeanMeche requested review from JeanMeche and removed request for atscott July 4, 2026 23:49
@github-actions

github-actions Bot commented Jul 5, 2026

Copy link
Copy Markdown

Deployed adev-preview for fbdd55e to: https://ng-dev-previews-fw--pr-angular-angular-69646-adev-prev-fxcemprt.web.app

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

@JeanMeche JeanMeche added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Jul 5, 2026
@leonsenft leonsenft merged commit 95a9531 into angular:main Jul 6, 2026
28 checks passed
@leonsenft

Copy link
Copy Markdown
Contributor

This PR was merged into the repository. The changes were merged into the following branches:

@erkamyaman erkamyaman deleted the docs-infra-prefer-avoid-header-restyle branch July 6, 2026 21:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

action: merge The PR is ready for merge by the caretaker adev: preview area: docs-infra Angular.dev application and infrastructure target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs: "Prefer" / "Avoid" code block headers could be visually clearer

3 participants