coreui / coreui-pro / 30922134893

93%

main: 94%

push

github

feat(PasswordInput)!: render the toggle icon in JavaScript (#691)

The toggle was the last adornment in the library painted by a CSS mask: the
author wrote an empty <span class="form-password-action-icon">, and two
URL-encoded SVGs sat in the stylesheet so a sibling selector could swap
between them. Every page carried those 2.5 kB whether or not it had a
password field, and changing the artwork meant overriding a Sass variable
with a data URI.

The plugin renders it now, inline SVG on currentColor like the cleaner and
the indicator, swapped in the same place that already keeps aria-pressed in
sync with the input's type. The button needs no icon markup, so
scss/forms/_form-password.scss goes entirely - the class, both variables
and the token block - and the artwork is an option, sanitized like every
other icon we accept.

The one thing the CSS version had over this is that it needed no script, so
the plugin gained the DOMContentLoaded data-API pass Chip, Chip Set, Chip
Input and Search Button already make: markup with data-coreui-toggle
renders its icon without a line of your own.

coreui.min.css: 44.17 -> 43.15 kB gzip. The 28 visual baselines are
unchanged, which is the proof that matters - the rendered icon is identical
to the mask it replaces.

4238 of 4779 branches covered (88.68%)

Branch coverage included in aggregate %.

16 of 21 new or added lines in 2 files covered. (76.19%)

8165 of 8547 relevant lines covered (95.53%)

365.87 hits per line