This avoids awkward wrapping if the label is longer than the input. This will
show an ellipsis to suggest there's more text in the label than can be shown.
When the `label` element is displayed on top of the input (`label` is set and
there is no `placeholder`), it would block clicks from reaching the input. This
allows them to get through, but then also restores `label`'s events once it
moves out of the way.
Fixes https://github.com/vector-im/riot-web/issues/8469
These icons are based on Feather as the original source, but they have various
tweaks applied, such as stroke width, color, etc. Hopefully the tweaked name
makes this more obvious in the future.
The label moves into the border on focus and after being filled. A valid color
is applied to the label and input border. Other states like invalid can be added
later as needed.
Adapted from @ara4n's experiment into a React component with a CSS only
approach.
J. Ryan Stinnett