IgniteUI / igniteui-webcomponents / 41902768316

100%

push

github

feat(tabs): Adds `headerPosition` (`header-position`) to `igc-tabs` (#2556)

* feat(tabs): add headerPosition with column keys and orientation

Add `headerPosition` (`header-position`): `top` (default), `start` and
`end`. In a column, Up and Down move between the tabs, and the tab list
has `aria-orientation="vertical"`. The arrow keys of the other axis stay
with the browser, so a row still does not cancel Up and Down.

The column layout follows in the next commits. #2553

* feat(tabs): add headerPosition with column keys and orientation

Add `headerPosition` (`header-position`): `top` (default), `start` and
`end`. In a column, Up and Down move between the tabs, and the tab list
has `aria-orientation="vertical"`. The arrow keys of the other axis stay
with the browser, so a row still does not cancel Up and Down.

The column layout follows in the next commits. #2553

* feat(tabs): scroll a column of headers and move its indicator

In a column with a set height, the scroll buttons show above and below
the headers when they do not fit, and scroll them one header at a time.
A selected or focused tab scrolls into view in the column. The
indicator moves along the column with the selected header. A change of
`headerPosition` starts the scroll offsets over, keeps the focused
header in view, and moves the indicator without a transition.

In a column, the scroll buttons and the height limit size the
container, so a resize waits a frame before the column is measured
again, and the resize observer reports no loop. Only the arrow icons of
the scroll buttons turn, so the buttons add no overflow. #2553

* feat(tabs): theme a column of headers on the side of the panels

In a column, the selected indicator lies over the side of the headers
that faces the panels, in every theme. The themes give its thickness as
custom properties, and the tabs place it on the axis of the headers.
Bootstrap draws the edges of a column with logical borders, and the
selected tab is open to t... (continued)

9081 of 9189 branches covered (98.82%)

Branch coverage included in aggregate %.

519 of 520 new or added lines in 7 files covered. (99.81%)

54748 of 54872 relevant lines covered (99.77%)

3812.77 hits per line