-
Notifications
You must be signed in to change notification settings - Fork 6.8k
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
Comments
@srix55 That's because your placeholder shouldn't be a placeholder but an
|
@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. |
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 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 |
@anwalkers Yes, I think the select should work in a similar way. Updated the issue title to mention select as well |
* 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.
* 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.
* 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.
* 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.
* 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.
* 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.
* 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.
* 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.
* 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
…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
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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
The text was updated successfully, but these errors were encountered: