This branch aims to overhaul a decent amount of forms styles and documentation with the hopes of getting it near final. It's still WIP and has a few more todos (noted below).
Quick screenshot
Changes
-
#17498 (closed), #18130 (closed): Removes horizontal padding on
.form-control-label
so it avoids overriding grid-based form layouts and renders correctly in stacked forms. -
#18515 (closed): Add
.form-control-{sm/lg}
classes to match small and large input classes, namely for vertical alignment of label and input in horizontal form groups. - #18702 (closed): Updates form validation docs to include basic examples for situations in which you'd want to use each state.
-
#18703 (closed): Drops
.text-help
for.form-control-feedback
, designed specifically to only display temporary form validation feedback text in addition to normal help text. - #18704: Updates form validation docs to include examples of validation feedback text alongside always-present form field help text.
Todos
-
#17248 (closed), #17266, #19277: Fieldsets vs divs in form groups -
#18390 (closed): Consider renaming .radio and .checkbox -
#18573 (closed): Consider renaming .form-control-label for it's more contextual use cases (e.g., only horizontal/grid forms and not necessary with radios/checkboxes as shown in #18389). -
#19004 (closed): Color contrast and color blindness on validation colorsPunting on this for another time -
#19139: Validation states on custom forms (needs select menus and file inputs)—maybe cherry-pick that PR into this one? -
#19771 (closed): Form control sizing not applying to <select>
s.