Components: feat(input, select): separate the placeholder and label as shown in the official mocks

[srix55]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The placeholder used in a textarea with multiple rows should automatically use up the other rows when too long to fit in just the first row.

What is the current behavior?

The placeholder is truncated in the first row with the other rows left blank.

What are the steps to reproduce?

Plunk: http://plnkr.co/edit/OAxiFX?p=preview

What is the use-case or motivation for changing an existing behavior?

I would want to tell the user as to what format a textarea is to be filled up. Possibly referencing certain standard examples / policies for which I need a few lines' worth of text.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.3.1
Material 2.0.0-beta.8-374aaff
All OS
Typescript ^2.2.2
Checked in Chrome & Firefox

Is there anything else we should know?

No

[donroyco]

@srix55 That's because your placeholder shouldn't be a placeholder but an md-hint. Placeholders should be short, descriptive and will be gone once the user starts typing. See Material Guidelines on this.

Placeholder text (Hint text)
Placeholder text rests in the input field until the user starts entering text. It may contain an action or an example, such as a phone number or email address.

[srix55]

@donroyco As the guidelines state, I am using the placeholder to state an example in textarea. They are short, & descriptive & happen to take 2 lines out of 5 (for textarea). Having the example in the hint seems misplaced. The guidelines don't say that an example spanning 2 lines should be truncated & shown in 1. The textarea tag works by wrapping the placeholder text even if it disappears when text is entered... that should be the way our placeholder should show too.

[mmalerba]

This stems from the fact that an older version of the material spec did not differentiate between the label and the placeholder. However the current version of the spec does (video example). Until the separate placeholder & label are implemented I do recommend using a hint for the longer text as @donroyco recommends.

[anwalkers]

@mmalerba Hoping that mat-select will also inherit the label/placeholder behavior planned for input as spelled out in the latest material.io guidance.

In this spec their are examples of a "select" with Label and Placeholder.

https://material.io/guidelines/components/text-fields.html#text-fields-states

[mmalerba]

@anwalkers Yes, I think the select should work in a similar way. Updated the issue title to mention select as well

[angular-automatic-lock-bot[bot]]

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._}