Create TextField component

[marcoambrosini]

fixes #2866

• Optional clear button
• Placeholder
• Optional icon in front? (Do we still do this, or is it only the registration app?)
• Enforce a11y with a label outside of the view port
• Announce valid input when the checkmark is shown

Screen.Recording.2022-07-27.at.11.44.52.mov

[CarlSchwan]

It looks really good, some points:

• I guess a height of 44px would be better: this would pass the AAA WGAC checks and also allow to put of a and a in the same row and make then aligned
• It should be possible to change the type attribute of the field to support number, tel, email, search ...
• Make it possible to have a label inside the viewport and visible
• Expose some props from input: disabled, max, min, required, minlength, maxlength,readonly, autocomplete, autofocus, ...
• It would be good to have a PasswordField equivalent as a replacement for https://github.com/nextcloud/strengthify but probably best to add it in another separate PR

[marcoambrosini]

I guess a height of 44px would be better: this would pass the AAA WGAC checks and also allow to put of a and a in the same row and make then aligned

I think that that would be too big for most purposes. I already made it slightly bigger than what we currently have. Also we're aiming at WCAG level 2 for most of our UI elements.

It should be possible to change the type attribute of the field to support number, tel, email, search ...

I would do this in separate components in order to have smaller and easier to maintain components. Once we have them we can create a "meta" inputVue component that receives the type prop, bind the attributes and forward the listeners so that it effectively becomes transparent.

Make it possible to have a label inside the viewport and visible

Sounds good :)

Expose some props from input: disabled, max, min, required, minlength, maxlength,readonly, autocomplete, autofocus, ...

These are already bound because all the attrs are inherited by the inner html <input /> element. I will add this to the docs though.

It would be good to have a PasswordField equivalent as a replacement for https://github.com/nextcloud/strengthify but probably best to add it in another separate PR

Sounds good :)

[marcoambrosini]

Update: visible label option and added docs about attribute inheritance

[CarlSchwan]

Update: visible label option and added docs about attribute inheritance

hmm actually I would prefer if the API user could do something like this:

<div class="row">
   <label for="$ref.myField.id">My label</label>
   <TextField ref="myField" :label-outside="true"></TextField>
</div>

For example, this could be helpful in the personal settings page since we want to have our own label with a button next to it.

[marcoambrosini]

What about adding this label icon from within the textfield component, as a slot for example?
I think it's a good idea to foresee the main patterns in the component design and stick to those. @jancborchardt and @nimishavijay do you have a clear picture of how many variants of this we have?

[CarlSchwan]

What about adding this label icon from within the textfield component, as a slot for example? I think it's a good idea to foresee the main patterns in the component design and stick to those. @jancborchardt and @nimishavijay do you have a clear picture of how many variants of this we have?

That would make sense and I would be happy with that too:

What I see as patterns are:

personal page

• A label outside on top with one or two actions
• an additional aria-describeby description at the bottom
• an optional action inside

theming section

• label and text field are side by side

inline textfield

• placeholder text instead of a label
• Should be avoided when possible and in particular when there is multiple text fields next to each others

[marcoambrosini]

• additional style needed in a follow-up Set border color to maxcontrast nextcloud/forms#1270

[CarlSchwan]

Looks good to me 👍

[nickvergessen]

In case of passwords the clear button should be replaced with an Eye-con to show the password instead of ***** ?
Or not part of v1 of the component?

[marcoambrosini]

/backport to stable5