Add label about vaadin-text-field HOT 9 CLOSED

Prototyping timebox 2d

from vaadin-text-field.

The art of labeling -- A11ycasts #12

from vaadin-text-field.

Research Results Document:
https://github.com/vaadin/vaadin-input/blob/proto/label/RESEARCH-LABEL.md

Prototype:

• Branch: https://github.com/vaadin/vaadin-input/blob/proto/label/RESEARCH-LABEL.md
• Live demo: https://www.webcomponents.org/preview/vaadin/vaadin-input/a7bc5d45900eedfbfc13d9c607993fdd69c4ec5e/demo/demo/index.html

from vaadin-text-field.

Some comments:

• No duplicate properties, so only label, no caption
• We will not introduce a property to configure the “floating label”. It should be completely doable with CSS/styling/theme. To do this, we should reflect the state of the input as host attributes (i.e. <vaadin-input focus empty></vaadin-input>)
• It should be possible to use both the label and native placeholder together at the same time. The material theme can handle all cases by utilizing the focus and empty attributes we expose in the host element – i.e. if the native placeholder is used, we do not add the empty attribute even when the value is empty.

  • When input.floating == true, the label is hidden, the placeholder mirrors the label value, and when the input has a value, the label is shown.

    Unnecessary. The label already acts as the placeholder, and the developer can choose to use either just the label or the placeholder, which initially look the same, but when the field has value, the label floats, but the placeholder just disappears. Or the developer can choose to use both at the same time, which results in the label to “always float”.

    See examples here (“caption” == “label”): http://codepen.io/jouni/full/dcrAu/

If you want, you can check my prototype for inspiration: https://github.com/jouni/web-component-styling/blob/multiple-themes/elements/vaadin-input.html

Live example: http://jouni.me/web-component-styling/demo/

from vaadin-text-field.

No duplicate properties, so only label, no caption

I'm not proposing two properties, what I meant is that I used label for my proto to be aligned with paper-input, but we could use caption if we rather be aligned with FW.

We will not introduce a property to configure the “floating label”.

Yeah, that is my final conclusion, my final prototype use just label to decide when to attach the label.

It should be possible to use both the label and native placeholder together at the same time

My prototype does in this way, see the latest solution.

check my prototype for inspiration

Thanks. I think we almost came with the same approach, the native placeholder is shown, and when it disappears the label is shown.

The only difference is that I tried to do everything with CSS instead of having focus and empty attributes.
So using input:placeholder-shown + label and input:focus + label you can achieve the same, the problem is that placeholder-shown is not supported in Edge, so we cannot get rid of empty

from vaadin-text-field.

Okay, great! I think I just had problems following your research report, and drew tje wrong conclusions (I didn’t test the prototype, my bad).

We should align with HTML (label) instead of Vaadin Framework (caption).

I would try to avoid too fragile CSS selectors such as + which depend on the DOM order, and would opt for more explicit attributes.

from vaadin-text-field.

order is not a big problem since they are in a flex box, and the user cannot move input and label from the DOM. So drawing the label after the input and setting input order: 2 solves the problem.

But agree, since browsers have problems with placeholder-shown, we need the empty property, so in with the same effort we can do the same for the focus and use attributes as you suggest.

from vaadin-text-field.

Prototype review conclusions:

• clicking the label should focus the input
• <vaadin-input>, the internal label and input are display: block by default, the internal input takes all the available container width
• expose CSS mixins, one for the label, one for the input for now
• reflect the input states in the host element attributes: has-value, focused

from vaadin-text-field.

reflect the input states in the host element attributes: has-value, focused

I would go with empty and focus instead. Or if has-value, perhaps has-focus then also.

expose CSS mixins, one for the label, one for the input for now

For the names, I’m currently not 100% if I would just go with --label and --input, or if I would prefix them and use BEM style notation like --vaadin-input__label and --vaadin-input__input.

from vaadin-text-field.