Form Input inventory

[joseegm]

Goal: have in inventory of at most input line uses cases.

The form inputs Current cases we have now:

https://techne.yaas.io/components/Form-Elements.html

• Normal
• Password
• Textarea

Note: Not to be confused with "states" of the input field like: pristine, error, focused, etc.

[joseegm]

Form inputs for v2.0 and their usage

• Standard: for Text entry; names, identifiers, etc.
• Number: for Numeric information only; prices, amounts, etc.
• Password: Info hidden by default.
• Units: display units; prices with currencies, etc.
• Icon: display an icon to the left or right; search boxes, clear input button, etc.
• Limited: is limited to N amount of characters with an indicator of how many characters left.
• Read only: only to display information in the context of a form.
• Action: display also a button (preferably with icon); add items to a list. copy content to the clipboard.

[joseegm]

@denisewildner @jeannewalters
Do we have other uses cases?

Note: This issue is only to collect the different types. UX and Visuals will be treated in separate issues.

[xak]

I created an Invision board to collect examples of existing UIs — and added a Forms section. We should gather examples from EC as well. https://sapse.invisionapp.com/d/main#/projects/boards/5484242

We should not be posting screen shots of our products publicly.

[joseegm]

Not posting is products screenshots is, of course a must, but links to protected wiki pages it will be fine. We can also avoid that and only post small screenshots of individual elements.

[joseegm]

With the Elements created on #735 and the types on #733 (comment) and looking at the uses cases from #733 (comment)

Inputs types with common elements

Type	Use	Example
Standard	Text entry	names, identifiers
Number	Numeric information	prices, amounts
Password	Information not visible	passwords, tokens
Units	Information with scalar units	prices with currencies
Icon	Display icons to help the user understand what information to enter, or perform action on the content of the input	search boxes, clear input action
Limited	Information is limited to N amount of characters with an indicator of how many characters are left.	descriptions, limited identifiers
Read only	Only display information in the context of the form.	autogenerated fields
Action	Display also a button with label or icon that performs an action with the content of the input	add items to a list, copy content to the clipboard.
Textarea	Long text entry	descriptions, copy text

[joseegm]

This is done

[LeoT7508]

@joseegm

[joseegm]

Reopening this to keep it in context

@LeoT7508

Action and Action + Icon: Since the Icon + Action have a accent color (blue), I think we can give the Action and the Action + Icon the same color to keep it consistent

Read only: is missing the border.

[LeoT7508]

@joseegm

The colors aren't completely flushed out here. I made them black as placeholder. But in theory yes they will probably be a grey shade or the action blue from the color palette.

Jeanne and Irla are still having UX talks about how the fields should look. They were supposed to talk today to finalize.