IgniteUI / igniteui-angular / 40321206685

94%

push

github

fix(tabs): header background token, scrolling into view and scroll buttons (#17701)

* fix(tabs): header background token, scrolling into view and scroll buttons

Aligns the tabs with the Web Components tabs, in look and in behavior.

- The header strip is painted with the new `header-background` token of igniteui-theming in
  every theme, instead of `item-background` in the Material and Bootstrap themes only. The
  items paint `item-background` on top of it, so a translucent item color composites over the
  header color instead of stacking on a copy of itself, and the header can be made
  transparent on its own. The Fluent header is painted now too, as in Web Components.
- A tab added as selected that makes the header overflow is scrolled fully into view. It was
  scrolled against the viewport width before the scroll buttons appeared, so it stayed partly
  hidden behind the next button that had just appeared. The selected header is scrolled into
  view again after the buttons update on item changes.
- The scroll buttons go away when removing tabs makes the header fit again. The browser
  clamps the scroll position when the items shrink, but the stored offset kept its old value
  and both button-state resolvers treat a non-zero offset as scrolled. The offset is now
  clamped the same way when the buttons update.

Closes #17421

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* fix(tabs): address review notes on scrolling and the scroll buttons

- Scroll the selected header back into view on item changes only when the scroll buttons
  appeared or disappeared, i.e. when the viewport width changed. Adding or removing other
  tabs thus keeps a header the user scrolled away from the selected tab where it is.
- Guard the scroll into view against a selected index outside the items.
- Measure the items container width when a single header remains too, so a single
  oversized tab keeps its scroll buttons.
- The removal test now removes the selected l... (continued)

25337 of 27847 branches covered (90.99%)

Branch coverage included in aggregate %.

16 of 16 new or added lines in 1 file covered. (100.0%)

36845 of 38689 relevant lines covered (95.23%)

30257.9 hits per line