Five more defects in the example viewer, following #70508.
The DOM was queried before Angular rendered it. `setCodeLinesVisibility()`
walks the rendered lines but ran synchronously on tab change, so it measured
the outgoing tab and the incoming file showed in full. The selected tab was
also lost when the code block was hidden and reshown, because the recreated
tab group had no `[selectedIndex]` while `snippetCode` survived, leaving the
strip and the code disagreeing.
`expandable` was computed once at startup by counting hidden DOM nodes, so a
collapsed tab offered no way to expand it, and recomputing that count on tab
change would drop the control whenever the block was expanded, since nothing
is hidden then. Both paths now share one rule: a file is expandable when it
has a `visibleLinesRange` and either the block is expanded or the range
actually hides lines, so a range that covers its whole file still gets no
inert control.
Array indices were also mixed with 1-based line numbers: the gap check tested
`index - 1` for the preceding line, drawing a `...` separator inside
contiguous ranges, and the gutter tested `index` while the code tested
`index + 1`, shifting every line number by one.
Five new specs cover these, using the comma-separated range format the
pipeline emits; each fails with its fix reverted. The tab label also moves
from 0.8125rem to 0.875rem to match the code beside it.
(cherry picked from commit 26afa313f3)
The search dialog (Cmd/Ctrl+K) opens as a native modal via `showModal()`, but the
page behind it stayed scrollable, so scrolling drifted the underlying content
beneath the blurred backdrop.
`body` already reserves a stable scrollbar gutter, so setting `overflow: hidden`
while the dialog is open blocks background scrolling with no layout shift. The rule
keys off the dialog's `[open]` state, so it restores automatically on every close
path (Escape, click-outside, navigation) with no script involved.
The active docs tab applied a 2px bottom border that inactive tabs lacked,
which shrank the active label's content box and clipped its descenders. It
also set `line-height: 1.5` only on the active label, so switching tabs
nudged the text. Reserve the border as transparent on every tab and recolor
it on the active one, and share the label `line-height`, so the letters are
no longer cut and the label stays put when switching.
The code tabs rendered by the example viewer (e.g. the npm/pnpm/yarn/bun
install tabs) paint their active label as transparent text clipped to a
gradient. Material's MDC tab styles add `transition: color 0.15s linear`
to `.mdc-tab__text-label`, plus a 100ms delay on the active tab. Because
that transition animates `color` from the solid label color to
transparent, the solid color stays visible on top of the gradient for
~100ms when a tab is activated, which reads as a white flash.
Disable the transition on these labels so the color switches instantly,
and target `.mdc-tab__text-label` directly (instead of a generic `span`)
so `color: transparent` drives the gradient clip cleanly.
enforce content to be fluid until a specific max width, and rollback breakpoints to be applied when 1430px is the current win size
as widths between 1430px and 1431px will be broken
PR Close#61384
Setting CSS variables directly is fragile and isn't the officially supported way of override Material styles. Instead the `tabs-overrides` mixin should be used which has validation for the token names.
For future reference, these are the docs for the styling API: https://material.angular.io/components/tabs/styling
PR Close#61008
- Detachment of the navigation from the left window border
- Odd horizontal scroll when there is a URL fragment and the viewport width <900px
PR Close#60583
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While
we are doing this to improve our development experience in the short term, efforts are also in place
to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted
back out in the future when components is ready to leverage it as well.
PR Close#57132
Kam