Comments (9)
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
, nocaption
- 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
andempty
attributes we expose in the host element – i.e. if the native placeholder is used, we do not add theempty
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 aredisplay: 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.
Related Issues (20)
- Vaadin-text-field might have multiple definitions HOT 2
- JAWS/NVDA - required text field pronounced as "invalid" HOT 3
- I don't expect the email field to be right aligned in RTL mode HOT 6
- Generate TypeScript definitions for P3
- Screenreader issue for <aria-labelledby> attribute HOT 2
- Restore helper text slot and API HOT 1
- duplicate registrations since 2.5.6 HOT 2
- Focus style not applied when clicking in textfield HOT 4
- Screenreader issue for read-only text fields HOT 6
- NewLine '\n' related issue HOT 3
- vaadin-email-field overrides custom patterns
- Improvement: TextArea rows HOT 2
- Required Indicator not showing when using Binder HOT 3
- Polymer 3 conversion and TS event type definitions
- [BUG] - Incorrect rendering: Text field / flex grow does not respect outer margin HOT 4
- Firefox 83 breaks autocapitalize test HOT 1
- Remove hasValue property and clear button workaround HOT 1
- A TextField with setAutoselect(true) doesn't work on Android mobile (Chrome browser) HOT 2
- Incorrect EMail field validation HOT 3
- Testbench test fails to submit value for homebrew field
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vaadin-text-field.