coreui / coreui-pro / 32673970196

95%

main: 94%

push

github

fix(Chip): give the remove button a size, and stop swapping image with icon (#866)

Four defects, all in the size surface, found by comparing the tokens the
stylesheet reads against the ones it declares.

`.chip-remove` took its width and height from `--cui-chip-min-height`, a token
declared nowhere. Both reads were invalid at computed-value time, so both
properties fell to `auto` and the button measured 0x0 at every chip size. It
reads `--cui-chip-remove-size` now: 16px, 14px on `.chip-sm`, 20px on `.chip-lg`.
A chip with a remove button is wider than it was.

`chip-size()` declared `--cui-chip-dismiss-size` while the glyph read
`--cui-chip-remove-size`, so `.chip-sm` and `.chip-lg` passed a value that landed
in a token nobody read and the remove icon stayed at its base size in every size
class. The mixin writes the name that is read.

Both size classes passed the image and icon sizes to `chip-size()` in each
other's positions. A large chip rendered a 24px icon next to a 20px image — the
reverse of the base sizes, where the image is the larger of the two. Large is
24px image / 20px icon now, small 16px / 14px.

`.chip-input.disabled` styled `.chip-dismiss`, the v5 name, so the rule matched
nothing and the disabled state never reached the remove buttons through CSS. The
button's own `disabled` attribute, set by the component, was carrying it alone.

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