coreui / coreui-pro / 38298661222

96%

main: 94%

push

github

fix(Nav): keep wrapped nav pills fully round (#1628)

Nav pills took calc(var(--cui-radius) * 3), 24px by default. That is fully
round on a one-line pill (40px tall) and on a larger font (46px), but a
pill whose label wraps (64px) shows corners.

--cui-nav-pills-border-radius is a fixed 3rem now, which keeps a pill up to
96px tall fully round. A taller pill gets 48px corners instead of a capsule:
with the 50rem pill radius a long label in a 160px vertical nav (184px
tall) pushed the corner letters of its first and last lines past the
active fill, while 3rem kept them inside (measured in Chromium). Being a
fixed value, it no longer follows --cui-radius.

The migration guide gives the new value in place of the 1.5rem one, and the
border radius page no longer says --cui-radius re-rounds the whole page: the
shapes that are round by design (chips, switches, .rounded-pill on
--cui-radius-pill, nav pills, avatars and the range track) keep their own
radii.

A visual spec wraps a pill label and checks that the pill is taller than
one line and still fully round, and that setting --cui-radius to 0 leaves
the pill at 48px. The old value fails both, --cui-radius-pill and a radius
that follows --cui-radius fail the second.

7681 of 8269 branches covered (92.89%)

Branch coverage included in aggregate %.

13291 of 13590 relevant lines covered (97.8%)

1715.36 hits per line