Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
srix55 opened this issue Aug 1, 2017 · 6 comments · Fixed by #8223
Closed
Assignees
Labels
Accessibility This issue is related to accessibility (a11y) feature This issue represents a new feature or feature request rather than a bug or bug fix P2 The issue is important to a large percentage of users, with a workaround

Comments

@srix55
Copy link

srix55 commented Aug 1, 2017

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
Copy link
Contributor

donroyco commented Aug 1, 2017

@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
Copy link
Author

srix55 commented Aug 1, 2017

@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
Copy link
Contributor

mmalerba commented Aug 2, 2017

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.

@mmalerba mmalerba changed the title Longer placeholders aren't auto-wrapped in textarea with multiple rows feat(input): separate the placeholder and label as shown in the official mocks Aug 2, 2017
@mmalerba mmalerba added Accessibility This issue is related to accessibility (a11y) feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed discussion labels Aug 2, 2017
@anwalkers
Copy link

@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 mmalerba changed the title feat(input): separate the placeholder and label as shown in the official mocks feat(input, select): separate the placeholder and label as shown in the official mocks Oct 17, 2017
@mmalerba
Copy link
Contributor

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

@jelbourn jelbourn added P2 The issue is important to a large percentage of users, with a workaround and removed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Oct 30, 2017
@jelbourn jelbourn assigned crisbeto and unassigned mmalerba Oct 30, 2017
@crisbeto crisbeto added the has pr label Nov 3, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 3, 2017
* 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.

BREAKING CHANGE: The `MatFormFieldControl.shouldPlaceholderFloat` property has been renamed to `shouldLabelFloat`.
BREAKING CHANGE: The `MAT_PLACEHOLDER_GLOBAL_OPTIONS`, `FloatPlaceholderType` and `PlaceholderOptions` symbols are now deprecated. Use `MAT_LABEL_GLOBAL_OPTIONS`, `FloatLabelType` and `LabelOptions` instead.
BREAKING CHANGE: The `MatFormField.floatPlaceholder` input has been deprecated, use `floatLabel` instead.

Fixes angular#6194.
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 4, 2017
* 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 added a commit to crisbeto/material2 that referenced this issue Nov 4, 2017
* 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 added a commit to crisbeto/material2 that referenced this issue Nov 12, 2017
* 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 added a commit to crisbeto/material2 that referenced this issue Nov 14, 2017
* 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 added a commit to crisbeto/material2 that referenced this issue Nov 20, 2017
* 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 added a commit to crisbeto/material2 that referenced this issue Nov 21, 2017
* 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 added a commit to crisbeto/material2 that referenced this issue Nov 28, 2017
* 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.
tinayuangao pushed a commit that referenced this issue Nov 28, 2017
* 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 #6194.

* fix: add transition to placeholder text
tinayuangao pushed a commit to tinayuangao/material2 that referenced this issue Nov 29, 2017
…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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) feature This issue represents a new feature or feature request rather than a bug or bug fix P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants