Skip to content

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

Open
erkamyaman wants to merge 1 commit into
angular:mainfrom
erkamyaman:docs-infra-prefer-avoid-header-restyle
Open

fix(docs-infra): restyle prefer/avoid code block headers#69646
erkamyaman wants to merge 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

adev: preview area: docs-infra Angular.dev application and infrastructure

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants