10 Mar 2017
New field element (for better controls)
TL;DR: there’s a new
.field container, and
.control has been re-purposed.
Since the beginning, the
.control has been a very versatile element that allowed:
- to space controls vertically
- to include an icon alongside inputs, buttons, textareas…
- to append a loading spinner
- to create horizontal forms
- to create control addons
- to create control groups
.control element acted as both a block container (for spacing, for other controls in a horizontal form), but also an inline container (for adding an icon, a loader, an addon, and grouping).
It led to issues where you couldn’t:
- add a help text horizontally
- add multiple icons or loaders in a group of controls
- add a different icon on addons
.field element becomes the block container for
.control elements. As a result, it inherits the
.control element can only contain a
.textarea, and eventually a
.icon. It can no longer contain a
.help element or other
But it allows more elaborate designs.
Addons with multiple icons or states.
Horizontal form with help text
This email is correct