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.

CommentFileSizeAuthor
#23 interdiff-3257075-22-23.txt1.98 KBpivica
#23 floating-labels-improvements-3257075-23.patch29.82 KBpivica
#22 interdiff-3257075-18-22.txt1.69 KBpivica
#22 floating-labels-improvements-3257075-22.patch29.71 KBpivica
#18 interdiff-3257075-16-18.txt7.91 KBpivica
#18 floating-labels-improvements-3257075-18.patch29.55 KBpivica
#17 floating-labels-improvements-3257075-16.patch27.48 KBpivica
#17 interdiff-3257075-15-16.txt2.2 KBpivica
#15 floating-labels-improvements-3257075-15.patch26.8 KBpivica
#15 interdiff-3257075-14-15.txt721 bytespivica
#14 floating-labels-improvements-3257075-14.patch26.86 KBpivica
#14 interdiff-3257075-13-14.txt715 bytespivica
#13 floating-labels-improvements-3257075-13.patch26.86 KBpivica
#13 interdiff-3257075-12-13.txt14.89 KBpivica
#12 floating-labels-improvements-3257075-12.patch22.14 KBpivica
#12 interdiff-3257075-10-12.txt3.26 KBpivica
#10 floating-labels-improvements-3257075-9-10.patch21.3 KBpivica
#9 interdiff-3257075-7-9.txt6.35 KBpivica
#9 floating-labels-improvements-3257075-9.patch21.7 KBpivica
#7 floating-labels-improvements-3257070-7.patch20.85 KBpivica
#7 interdiff-3257075-6-7.txt629 bytespivica
#6 floating-labels-improvements-3257070-6.patch20.84 KBpivica
#6 interdiff-3257075-5-6.txt710 bytespivica
#5 interdiff-3257075-4-5.txt1.25 KBpivica
#5 floating-labels-improvements-3257070-5.patch20.85 KBpivica
#4 floating-labels-improvements-3257070-4.patch19.91 KBpivica
#3 floating-labels-improvements-3257070-3.patch21.44 KBpivica
#2 floating-labels-improvements-3257070-2.patch12.06 KBpivica

Comments

pivica created an issue. See original summary.

pivica’s picture

Status: Active » Needs review
StatusFileSize
new12.06 KB

Here is a first patch, and this is still work in progress.

pivica’s picture

StatusFileSize
new21.44 KB

This patch fully works and covers all functionality and changes described in issue description. Additionally some refactoring of current floating label CSS code is done.

pivica’s picture

StatusFileSize
new19.91 KB

Some of changes from #3256665-6: Browsers are changing input bg color on autofill went into this patch, here is a clean version.

pivica’s picture

StatusFileSize
new20.85 KB
new1.25 KB

One refactoring change was a bit too much.

pivica’s picture

StatusFileSize
new710 bytes
new20.84 KB

Outline autofill fix should use body-bg so it looks transparent.

pivica’s picture

StatusFileSize
new629 bytes
new20.85 KB

input-group selector somehow went missing.

pivica’s picture

Title: Floating labels better filled and outlined support » Floating labels new filled and improved outlined support
pivica’s picture

StatusFileSize
new21.7 KB
new6.35 KB

Some 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.

pivica’s picture

StatusFileSize
new21.3 KB

Hmmm, 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.

pivica’s picture

Documentation related to this new changes is updated on https://www.drupal.org/docs/8/themes/bs-base/additional-features/floatin....

pivica’s picture

StatusFileSize
new3.26 KB
new22.14 KB

Testings 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.

pivica’s picture

StatusFileSize
new14.89 KB
new26.86 KB

New 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.

pivica’s picture

StatusFileSize
new715 bytes
new26.86 KB

Small fix for floating label outline wrong padding on empty selection.

pivica’s picture

StatusFileSize
new721 bytes
new26.8 KB

Forgot to fully remove focus and filled selectors in previous patch.

pivica’s picture

StatusFileSize
new2.2 KB
new27.48 KB

Some additional fixes for composite forms and active label bg color.

pivica’s picture

StatusFileSize
new29.55 KB
new7.91 KB

More fixes and improvements:

  • Removed most of form-composite last child CSS rules - it is complex to do this properly, exact design definition is missing and webforms are doing all kind of weird stuff with html and ajax reload elements (like advanced address). By removing rules layout behaviour is more predictable and actually looks better across various combinations. Maybe later we can improve this.
  • Some fixes for filled floating labels for elements without a label - style was missing. Also focusing element height change is fixed for textarea and elements without a label.
  • Enabling floating label on elements in code is additionally improved and now also works for form ajax reload parts. Thanks @Berdir for helping debug form ajax reload problem.

pivica credited Berdir.

pivica’s picture

berdir’s picture

+++ b/themes/bs_bootstrap/bs_bootstrap.theme
@@ -479,10 +480,21 @@ function bs_bootstrap_form_alter(&$form, FormStateInterface $form_state, $form_i
+        if (isset($element[$key]['#webform_composite_elements'])) {

this 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.

pivica’s picture

StatusFileSize
new29.71 KB
new1.69 KB

> 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.

pivica’s picture

StatusFileSize
new29.82 KB
new1.98 KB

Floating label outline for select box CSS is not setting select box bg transparent when label is missing.

pivica’s picture

Issue summary: View changes

  • pivica committed fb746f2 on 8.x-1.x
    Issue #3257075 by pivica, Berdir, mathilde_dumond: Floating labels new...
pivica’s picture

Status: Needs review » Fixed

Committed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.