coreui / coreui-pro / 38403532090

96%

main: 94%

push

github

feat(FloatingLabels): show the placeholder on focus and add .form-floating-always (#1639)

A floating-label field kept its placeholder transparent in every state, so
the hint never showed. The placeholder now shows under the floated label
while the field, or the control inside a field component, has focus, and
stays hidden while the label rests in the field. The existing transparent
rule is narrowed to "not focused" instead of adding a rule that reveals it.
A read-only .form-control-plaintext keeps its placeholder hidden in every
state, since it never takes input.

`.form-floating-always`, on `.form-floating` or on any ancestor, keeps the
label floated and the placeholder showing while the field is empty. On an
ancestor it reaches the wrappers the date and time pickers build from their
`floatingLabel` option, so the class goes on the picker element. The
date-time field and Multi Select carry their own resting state (transparent
mask, lowered label); those rules now skip the always-floated wrapper.

The floating labels page gains "Date and time" and "Always floating"
sections, and each component page with a floating-label section says where
the class goes. Example placeholders no longer repeat their label, since
they now show on focus.

Measured against 1fde52327, gzip level 9: coreui.css +143 B (77 550 B,
ceiling 77 568 B), coreui.min.css +113 B, components/forms
floating-labels.css +73 B, form-date-time.css +30 B,
form-multi-select.css +30 B.

7715 of 8293 branches covered (93.03%)

Branch coverage included in aggregate %.

13362 of 13660 relevant lines covered (97.82%)

1713.5 hits per line