feat(form-field): add support for separate label and placeholder #8223

crisbeto · 2017-11-03T19:13:15Z

Adds the ability for the user to specify both a label and placeholder text for a form field.
Renames all of the "floating placeholder" related terminology to refer to a "floating label" instead.
Aligns the input placeholder color with the Material spec.

crisbeto · 2017-11-03T19:14:08Z

@mmalerba I'm open to using the native label instead of mat-label, but it would require use to have a directive that selects all label nodes.

jelbourn · 2017-11-03T19:16:59Z

Could this be done without any breaking changes?

crisbeto · 2017-11-03T19:19:22Z

The only real breaking change is renaming the shouldPlaceholderFloat to shouldLabelFloat in the MatFormFieldControl interface @jelbourn, everything else is still re-exported under its old name. I can re-add the shouldPlaceholderFloat as an optional value and mark it as deprecated, but I suspect that not many people are implementing the interface.

jelbourn · 2017-11-03T20:41:16Z

Let's go with that- I want to avoid anything we have to call a breaking API change

crisbeto · 2017-11-04T22:17:19Z

Refactored to avoid breaking changes.

mmalerba · 2017-11-07T16:42:11Z

Still need to take a closer look at the code, but had a couple thoughts after looking at the demo:

It should be possible to have in input with no label and a placeholder, but making that work now would be a breaking change. Maybe we can just file a new issue and update that when we're making breaking changes
The placeholder needs an animation so it doesn't overlap with the label when the label is animating up. The spec has a video showing what it should look like

Thanks for doing this! Something I've been wanting to do for a while but haven't gotten the time

crisbeto · 2017-11-07T16:52:50Z

Yeah I wanted to avoid breaking changes.
We can't really animate the native placeholder attribute, the best we could do is delay showing it until the animation is done, but that means switching over the placeholder animations to Angular animations. We could do it in a follow-up.

mmalerba · 2017-11-07T16:58:26Z

we might not be able to do the sequenced animation, but could we at least slap a transition on the opacity? I think it will make it look a little nicer

crisbeto · 2017-11-07T17:12:19Z

We could do that, but it would be a progressive enhancement since not all browsers allow you to transition the native placeholder (e.g. Chrome does, but Firefox doesn't).

crisbeto · 2017-11-12T09:47:51Z

Rebased and made it so the placeholder doesn't overlap the animating label @mmalerba, can you take another look?

mmalerba · 2017-11-13T20:09:23Z

src/lib/form-field/form-field.html

@@ -8,24 +8,31 @@
    <div class="mat-input-infix mat-form-field-infix">
      <ng-content></ng-content>

-      <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper">
+      <span class="mat-form-field-label-wrapper">


I'm sure people are targeting those classes with custom styles, lets leave them for now with a TODO to remove them at the next major.

mmalerba · 2017-11-13T20:09:41Z

src/lib/form-field/form-field.html

        <!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
             read if it comes before the control in the DOM. -->
-        <label class="mat-input-placeholder mat-form-field-placeholder"
+        <label class="mat-form-field-label"


Same, leave the old classes too for now

mmalerba · 2017-11-13T20:19:47Z

src/lib/form-field/form-field.ts

+  }
+
+  _shouldLabelFloat() {
+    return this._canLabelFloat && (this._control.shouldLabelFloat ||


This logic seems different than before, it didn't consider _canPlaceholderFloat before

If I remember correctly, some of the logic was done by combining CSS classes. I simplified it to make it easier to follow.

mmalerba · 2017-11-13T20:20:58Z

src/lib/form-field/form-field.ts

+  }
+
+  _hideControlPlaceholder() {
+    return !this._hasLabel() || !this._shouldLabelFloat();


Maybe the _canLabelFloat from above should be factored into this logic instead?

The _shouldLabelFloat call here already factors in _canLabelFloat.

crisbeto · 2017-11-14T18:40:16Z

I restored the classes and addressed the comments @mmalerba, can you take another look?

jelbourn · 2017-11-21T15:37:29Z

@crisbeto ready to presubmit if you can rebase

crisbeto · 2017-11-21T17:08:45Z

Rebased @jelbourn.

tinayuangao · 2017-11-28T19:10:29Z

@crisbeto please rebase. Thanks!

* Adds the ability for the user to specify both a label and placeholder text for a form field. * Renames all of the "floating placeholder" related terminology to refer to a "floating label" instead. * Aligns the input placeholder color with the Material spec. Fixes angular#6194.

crisbeto · 2017-11-28T19:21:20Z

Rebased @tinayuangao.

…ular#8223) * feat(form-field): add support for separate label and placeholder * Adds the ability for the user to specify both a label and placeholder text for a form field. * Renames all of the "floating placeholder" related terminology to refer to a "floating label" instead. * Aligns the input placeholder color with the Material spec. Fixes angular#6194. * fix: add transition to placeholder text

angular-automatic-lock-bot · 2019-09-07T19:02:32Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

crisbeto assigned jelbourn, kara and mmalerba Nov 3, 2017

crisbeto requested review from amcdnl, jelbourn, kara, mmalerba and tinayuangao as code owners November 3, 2017 19:13

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 3, 2017

crisbeto added the pr: needs review label Nov 3, 2017

crisbeto force-pushed the form-field-label branch from 4bfc4b3 to e180748 Compare November 4, 2017 22:17

crisbeto force-pushed the form-field-label branch from e180748 to 0e44d32 Compare November 4, 2017 22:19

crisbeto force-pushed the form-field-label branch from 0e44d32 to bb61885 Compare November 12, 2017 09:46

mmalerba reviewed Nov 13, 2017

View reviewed changes

crisbeto force-pushed the form-field-label branch 2 times, most recently from a348880 to dc4f44b Compare November 14, 2017 18:39

mmalerba added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Nov 15, 2017

mmalerba approved these changes Nov 15, 2017

View reviewed changes

crisbeto force-pushed the form-field-label branch from dc4f44b to 9db6693 Compare November 20, 2017 20:43

crisbeto force-pushed the form-field-label branch from 9db6693 to 0a75795 Compare November 21, 2017 17:08

tinayuangao added the pr: needs rebase label Nov 28, 2017

crisbeto added 2 commits November 28, 2017 20:20

fix: add transition to placeholder text

26be8c4

crisbeto force-pushed the form-field-label branch from 0a75795 to 26be8c4 Compare November 28, 2017 19:21

crisbeto removed the pr: needs rebase label Nov 28, 2017

tinayuangao merged commit d6fec35 into angular:master Nov 28, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(form-field): add support for separate label and placeholder #8223

feat(form-field): add support for separate label and placeholder #8223

crisbeto commented Nov 3, 2017 •

edited

Loading

crisbeto commented Nov 3, 2017

jelbourn commented Nov 3, 2017

crisbeto commented Nov 3, 2017

jelbourn commented Nov 3, 2017 •

edited

Loading

crisbeto commented Nov 4, 2017

mmalerba commented Nov 7, 2017

crisbeto commented Nov 7, 2017

mmalerba commented Nov 7, 2017

crisbeto commented Nov 7, 2017

crisbeto commented Nov 12, 2017

mmalerba Nov 13, 2017

mmalerba Nov 13, 2017

mmalerba Nov 13, 2017

crisbeto Nov 14, 2017

mmalerba Nov 13, 2017

crisbeto Nov 14, 2017

crisbeto commented Nov 14, 2017

jelbourn commented Nov 21, 2017

crisbeto commented Nov 21, 2017

tinayuangao commented Nov 28, 2017

crisbeto commented Nov 28, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

feat(form-field): add support for separate label and placeholder #8223

feat(form-field): add support for separate label and placeholder #8223

Conversation

crisbeto commented Nov 3, 2017 • edited Loading

crisbeto commented Nov 3, 2017

jelbourn commented Nov 3, 2017

crisbeto commented Nov 3, 2017

jelbourn commented Nov 3, 2017 • edited Loading

crisbeto commented Nov 4, 2017

mmalerba commented Nov 7, 2017

crisbeto commented Nov 7, 2017

mmalerba commented Nov 7, 2017

crisbeto commented Nov 7, 2017

crisbeto commented Nov 12, 2017

mmalerba Nov 13, 2017

Choose a reason for hiding this comment

mmalerba Nov 13, 2017

Choose a reason for hiding this comment

mmalerba Nov 13, 2017

Choose a reason for hiding this comment

crisbeto Nov 14, 2017

Choose a reason for hiding this comment

mmalerba Nov 13, 2017

Choose a reason for hiding this comment

crisbeto Nov 14, 2017

Choose a reason for hiding this comment

crisbeto commented Nov 14, 2017

jelbourn commented Nov 21, 2017

crisbeto commented Nov 21, 2017

tinayuangao commented Nov 28, 2017

crisbeto commented Nov 28, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

crisbeto commented Nov 3, 2017 •

edited

Loading

jelbourn commented Nov 3, 2017 •

edited

Loading