Problem/Motivation
We compared material design floating label implementation with our own and detected a room for improvements:
- Remove $floating-label-on-focus and just make that CSS rules active always
- Remove $floating-label-outline SASS variable and move that option to theme settings where default selection is current styling. Add filled and outlined options to cover improvements.
- Change color of active label as material is doing - it would make sense to use the same color as for focus border color, as material is doing it, however default border focus color has too weak of the contrast for a text. We could use that as a base color and then calculate appropriate needed contrast.
Additionally there are couple of bugs that are found like a active label bg color [this is on the end fixed here with a lot of other stuff] that should not be set for all cases and #3257070: Generator moving (refactoring) partials detection needs improvements. This issue will concentrate on improvements and other issues will work on bugs.
| Comment | File | Size | Author |
|---|---|---|---|
| #23 | interdiff-3257075-22-23.txt | 1.98 KB | pivica |
| #23 | floating-labels-improvements-3257075-23.patch | 29.82 KB | pivica |
Comments
Comment #2
pivica commentedHere is a first patch, and this is still work in progress.
Comment #3
pivica commentedThis patch fully works and covers all functionality and changes described in issue description. Additionally some refactoring of current floating label CSS code is done.
Comment #4
pivica commentedSome of changes from #3256665-6: Browsers are changing input bg color on autofill went into this patch, here is a clean version.
Comment #5
pivica commentedOne refactoring change was a bit too much.
Comment #6
pivica commentedOutline autofill fix should use body-bg so it looks transparent.
Comment #7
pivica commentedinput-group selector somehow went missing.
Comment #8
pivica commentedComment #9
pivica commentedSome basic floating rules should not be applied to radio and checkbox input elements.
Floating label disabling can now be done also with a CSS class `form--floating-labels-off` (use it in webforms builder). Information about disabling per form is now passed to form children so they are correctly render.
Comment #10
pivica commentedHmmm, changes in the latest patch are now dependent on changes in #3256688: Floating labels input has left or right border radius reset so this patch now depends on patch in that issue.
Comment #11
pivica commentedDocumentation related to this new changes is updated on https://www.drupal.org/docs/8/themes/bs-base/additional-features/floatin....
Comment #12
pivica commentedTestings are showing two things:
- For select we should assume always that label position is in active state because select most of the time have a label for none/empty value. Assuming other way leads to a bug when you select none option, in this case currently, label will overlap with select empty value label.
- Position of label in textarea is too low. Idea here was that on focus input caret stays on the same place where label was, but this looks ugly. We should reposition textarea label to be on the same place as in textfield.
New patch is fixing this two things.
Comment #13
pivica commentedNew version of the patch, changes:
- Use form-group--floating-label for CSS selectors so we can disable floating label per element when needed.
- Support more elements: color, datetime, entity_autocomplete, machine_name, webform_autocomplete, webform_time.
There is a problem with a webform address element - address ajax loaded elements are not floating label enabled. The problem is that bs_bootstrap_preprocess_form_element() is not called on ajax form update. Will try to figure that out.
Comment #14
pivica commentedSmall fix for floating label outline wrong padding on empty selection.
Comment #15
pivica commentedForgot to fully remove focus and filled selectors in previous patch.
Comment #17
pivica commentedSome additional fixes for composite forms and active label bg color.
Comment #18
pivica commentedMore fixes and improvements:
Comment #20
pivica commentedComment #21
berdirthis works for webform I guess, but will not work in commerce checkout or other cases where those form types are used. You need to (also) check for
#type.Comment #22
pivica commented> this works for webform I guess
Yeah you are right, added checking for address, datetime and password_confirm types.
Note that datetime is currently not working fully because html is quite different and floating label rules are not working fully for this case. I guess we will fix that in follow-up if needed.
Comment #23
pivica commentedFloating label outline for select box CSS is not setting select box bg transparent when label is missing.
Comment #24
pivica commentedComment #26
pivica commentedCommitted.