1477100 - Need to show in-field labels (small text and placeholder)

Status: VERIFIED FIXED

(Firefox :: WebPayments UI, defect, P1)

Comment 1

[Jean Gong :jgong]

Need to show labels in field label and animation between empty and selected state.  For example, for City field the label should be "City *" in empty state and animate when user starts typing in selected state.

Comment 2

[Jean Gong :jgong]

Animation is M4 and not needed for fx63.

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1477100 - Show the labels as placeholders inside of the fields, excluding dropdowns. r?mattn

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1477100 - Show the labels as placeholders inside of the fields. r?MattN

Show the labels as placeholders inside of the fields.

Comment 5

[Matthew N. [:MattN]]

Comment on attachment 8998631 [details]
Bug 1477100 - Show the labels as placeholders inside of the fields. r?MattN

Matthew N. [:MattN] (PM if requests are blocking you) has approved the revision.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/32e2d0ddc56a
Show the labels as placeholders inside of the fields. r=MattN

Comment 7

[Narcis Beleuzu [:NarcisB]]

Backed out for build bustages on editDialog.css

Push link: https://hg.mozilla.org/integration/autoland/rev/32e2d0ddc56a95d419428eb68f3093ee08376069
Backout link: https://hg.mozilla.org/integration/autoland/rev/cd628c962e757d258c5fca92e9586e88851caf7c
Log link: https://treeherder.mozilla.org/logviewer.html#?job_id=194607633&repo=autoland&lineNumber=38419

Comment 8

[Narcis Beleuzu [:NarcisB]]

There were also mochitest failures on test_address_form

Log link: https://treeherder.mozilla.org/logviewer.html#?job_id=194613101&repo=autoland&lineNumber=2086

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/8a7bbdede1c9
Show the labels as placeholders inside of the fields. r=MattN

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/3575c52180c4
Scroll the country picker into view to fix browser_dropdowns.js. r=me

Comment 11

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/8a7bbdede1c9
https://hg.mozilla.org/mozilla-central/rev/3575c52180c4

Comment 12

[Matthew N. [:MattN]]

Please wait to verify this bug until bug 1480886 lands as there are some temporary regressions about the address field positioning.

Comment 14

[Timea Cernea [:tbabos][inactive]]

The labels appear and are animated when their fields are active as the user starts to type.

However, in Edit mode, if there is a field with the red validation border triggered and the user clicks on the field, the label color will not turn to blue (as for the active state) until the user starts typing. 

Is this the expected behavior of the active state animation if an invalid field is selected?
Here is a screen recording of the behavior: https://streamable.com/ojmcn

Comment 15

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Timea Babos from comment #14)
> The labels appear and are animated when their fields are active as the user
> starts to type.
> 
> However, in Edit mode, if there is a field with the red validation border
> triggered and the user clicks on the field, the label color will not turn to
> blue (as for the active state) until the user starts typing. 
> 
> Is this the expected behavior of the active state animation if an invalid
> field is selected?
> Here is a screen recording of the behavior: https://streamable.com/ojmcn

No, that's not expected. We should show the text as blue when the field is focused even if the field is marked as invalid. Can you file a follow-up bug to fix this?

Comment 16

[Timea Cernea [:tbabos][inactive]]

Here it is: Bug 1488764. Will close this issue once the new one will be fixed. Thank you.

Comment 17

[Timea Cernea [:tbabos][inactive]]

Since Bug 1488764 is not an issue, I will mark this issue as Verified - Fixed based on Comment  14 on Windows 10, Ubuntu 18.04 and Mac OS 10.13.