coreui / coreui-pro / 32675885511

95%

main: 94%

push

github

fix(Nav): put the link's transition and the nav's gap on tokens (#867)

* fix(Nav): put the link's transition and the nav's gap on tokens

`.nav-link` compiled its transition into the rule while `.tab-pane`, forty lines
down the same file, already read the three-token form. Half of `_nav.scss` could
be retimed from the browser and half could not, with nothing to say which half
you were looking at. `$nav-link-transition` splits into
`$nav-link-transition-property`/`-duration`/`-timing` and the link reads
`--cui-nav-link-transition-*`. Measured: setting the duration to .9s used to
leave the link at .15s and now moves it.

`--cui-nav-gap` gets a home on `.nav`, defaulting to 0 so nothing moves.
`.navbar-nav` was already overriding a token that the component owning the `nav-`
prefix never declared, which reads as a token arriving from nowhere.
`.nav-underline` keeps its own `--cui-nav-underline-gap`.

* feat(Nav)!: lay the link out as a row, and fill it on hover and active

A nav link was a block, so an icon beside its label needed a wrapper to line up,
and the base nav marked hover and the active item by changing text color alone —
the only component in the library that signals a selection without a surface.

`.nav-link` is a flex row now, laid out by `--cui-nav-link-gap`, `-align` and
`-justify`. It takes `--cui-nav-link-hover-bg` and `--cui-nav-link-active-bg`,
rounded by `--cui-nav-link-border-radius`.

Measured across all six variants: tabs, pills and enclosed keep their own active
surface and only gain the hover fill; `.nav-underline` and `.nav-underline-border`
set `--cui-nav-link-active-bg: transparent`, because an underline already marks
the active item and a fill would say it twice. `.nav-fill` still centres its
labels — `--cui-nav-link-justify` does the work `text-align` used to.

* docs(Nav, Tabs): split the combined page in two

`navs-tabs` documented two things that are used apart: the nav — markup, styles
and tokens, no JavaScript — and the... (continued)

4532 of 5097 branches covered (88.92%)

Branch coverage included in aggregate %.

8653 of 9054 relevant lines covered (95.57%)

400.06 hits per line