IgniteUI / igniteui-webcomponents / 31172673872

98%

push

github

fix(tabs): opaque scroll buttons in the Indigo theme (#1955) (#2313)

The tab headers no longer show through the scroll buttons. The buttons now
paint an opaque surface backdrop underneath their themed background, so the
content scrolling beneath them stays hidden.

The 6.0.0 refactor moved the scroll buttons inside the scrolling container -
they are sticky grid cells that the headers scroll under, where before they
were flex siblings sitting outside the scroller and nothing could pass behind
them. Material, Fluent and Bootstrap resolve button-background to surface and
were unaffected; Indigo leaves both button-background and item-background
transparent, so from 6.0.0 on its buttons were see-through.

The backdrop is layered rather than substituted: background-color carries the
surface color and the themed background goes on top as a gradient, so a
button-background set through the Sass theme - or auto-derived from a custom
item-background - still covers it, and the parameters fixed in #1929 keep
working. Hover moves to the same layer, so Indigo's translucent
button-hover-background tint now composites over the surface instead of over
nothing. The disabled and focused states inherit the backdrop from the base
rule.

Default Indigo will show a faint surface patch where the buttons sit if the
surrounding background is not surface, which is inherent to overlaying a
transparent strip and matches what the other three themes already do.

Closes #1955

6528 of 6858 branches covered (95.19%)

Branch coverage included in aggregate %.

46566 of 47112 relevant lines covered (98.84%)

1806.55 hits per line