coreui / coreui-pro / 34786633834

95%

main: 94%

push

github

fix(Dropdown): round the first and last item against the menu corners (#1273)

A menu whose vertical padding is zero puts its first and last item flush
against its own rounded corners, so those items need a matching radius or their
background paints over the corner. Nothing gave them one: `.dropdown-item`
carries only the uniform `--#{$prefix}dropdown-item-border-radius`, which is `0`
by default and rounds all four corners when set, not the two that meet the
frame.

The rules that used to handle this were removed in #1168 as unreachable, on the
grounds that `@if $dropdown-padding-y == 0` is never true. It is true whenever
someone sets that knob to `0`, which is the case the branch existed for.

The radius is now what is left of the menu's inner radius once the padding has
eaten into it:

    max(0px, calc(border-radius - border-width - padding-y))

At no padding the item takes the full inner radius; once the padding clears the
radius the term floors at zero and the corners are square, which is what every
default build renders today. Intermediate paddings move continuously between the
two instead of switching.

Reading the three tokens rather than a Sass variable means this also follows
`--#{$prefix}dropdown-padding-y` or `--#{$prefix}dropdown-border-radius`
overridden in the browser, which a build-time `@if` cannot do. No new token or
variable: the expression has two readers, both here, and nothing about it is a
knob anyone would set.

The migration guide gave the removal's reason as "which is never true"; it now
says where the radius comes from instead.

5599 of 6242 branches covered (89.7%)

Branch coverage included in aggregate %.

10877 of 11280 relevant lines covered (96.43%)

467.44 hits per line