Form Design Tweaks

[wrenaria]

Current form:

Currently drop downs and forms are different heights. They should be the exact same height so that they align and provide an overall visual consistency throughout the form.

Drop downs should also be lengthened so that they fill the space and end on the same vertical line as a text field.

Design mockup:

The spacing between color/type icon and text in the dropdown list looks good but it feels much too tight together once its in the actual form.

Current form:

Currently upon opening the drop down, the top option is always highlighted. Nothing should be highlighted unless you mouse over it.

The accent on Rosé is facing the wrong direction.

[jrmerz]

@wrenaria

Couple things:

1) Please check the current dev-ptv site. I pushed updates for the form element alignments just before lunch. Let me know if they look ok.

2) Will fix icon spacing

3) The highlighted element in the dropdown is for keyboard navigation. It's the current element with focus. This allows a user to input data w/o using the mouse, tabbing between elements, using arrow keys to select from dropdown, enter key to select. If you would like a different focus state style, just let me know.

4) Will fix the accent

[wrenaria]

@jrmerz The form alignments look good. A little more space between the field/dropdown elements would perfect it:

Does the dropdown list have to start already highlighted? I know I've seen drop downs that allow for keyboard nav that aren't highlighted until you hit down on the keyboard. (Here's a quickly googled example: https://semantic-ui.com/modules/dropdown.html)

Also the form text feels rather large/heavy in comparison to all the other text on the site, so maybe that can drop in size a bit. Ideally the dropdown lists and populated fields should have the same size type. Out of curiosity, how are you handling font sizes? Pixels? Points? Something else?

[jrmerz]

1) Yup, I can add add more padding 2) So there is no highlighted value when no value is selected. Once a value is selected and you open the drop down, the selected dropdown value is highlighted. Since our drop downs start with a selected value, they are highlighted on first open. 3) I adjusted the drop down text size to match that of the placeholder input text. Giving the inputs the same height. I can drop the text size down and change the line-height for the element, should keep heights correct while reducing text size.

As for sizes, I have always used pixels.

[wrenaria]

1. :)

2. Oh okay, I suppose that makes sense. But when I test this and rosé is selected and then I open it back up, it shows red selected, which is a little confusing (see my previously included screenshot). Shouldn't rosé be the selected one in this case?

3. I don't see this change, I'm guessing it hasn't it been pushed yet?

[wrenaria]

Are my eyes correct in seeing the text forms and choices from the dropdown are displaying system fonts instead of Roboto? Can we possibly have them show Roboto instead?

[jrmerz]

2) Yes, you are correct, this was a bug. It should open with the currently selected value having a focus state. Fix has been pushed.

3) Sorry, that was a bad explantation. I was saying what I can try to do. The fix is now pushed.

4) Nice catch. This might actually be a bug with the new shadow dom system. I have to dig deeper in the interwebs to find out. For now I have added functionality to cork-styles to handle setting roboto as the font in standard form fields like input & button. fix is pushed.