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): option to imperatively float placeholder #2585

Merged
merged 4 commits into from
Feb 3, 2017

Conversation

devversion
Copy link
Member

@devversion devversion commented Jan 10, 2017

Refactors the [floatingPlaceholder] input to be able to specifiy whether the label should always float or not.

There are three options for the floatPlaceholder input binding now

  • If set to "always", the placeholder will always float
  • If set to "never", the placeholder will never float
  • If set to "auto", the placeholder will float if text is entered.

Closes #2466

R: @kara @jelbourn

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 10, 2017
@jelbourn jelbourn requested review from mmalerba and removed request for jelbourn January 12, 2017 00:23
@jelbourn
Copy link
Member

@kara does this cover what you need for autocomplete?
@mmalerba can you review the input changes?

Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to talk to Kara first and see if this is really necessary.

let fixture = TestBed.createComponent(MdInputContainerWithDynamicPlaceholder);
fixture.detectChanges();

let inputEl = fixture.debugElement.query(By.css('input'));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realize this might just be copied from other tests, but shouldn't they either both have .nativeElement or both not have it? Or if we really want them to be different call the second one labelNativeEl

@mmalerba
Copy link
Contributor

So it looks like Kara is able to do the autocomplete without this and I would rather not make this change. I plan to eventually make this type of functionality possible by allowing things other than native inputs to be placed inside md-input-container. It would then be up to that custom element to decide when it's empty which will govern whether the label is floating or not

@devversion
Copy link
Member Author

@mmalerba I understand. From issue #2466 I thought it would be necessary for the autocomplete. Let's close this PR then.

@devversion devversion closed this Jan 12, 2017
@devversion devversion deleted the feat/input-container-placeholder branch January 12, 2017 19:01
@devversion devversion restored the feat/input-container-placeholder branch January 13, 2017 22:12
@devversion devversion reopened this Jan 13, 2017
@devversion devversion assigned devversion and unassigned kara and mmalerba Jan 13, 2017
@devversion devversion added in progress This issue is currently in progress and removed pr: needs review labels Jan 13, 2017
@devversion devversion force-pushed the feat/input-container-placeholder branch from ab93d56 to 8932ce5 Compare January 14, 2017 15:11
@devversion devversion assigned mmalerba and unassigned devversion Jan 14, 2017
@devversion devversion added pr: needs review and removed in progress This issue is currently in progress labels Jan 14, 2017
get floatingPlaceholder(): boolean { return this._floatingPlaceholder; }
set floatingPlaceholder(value) { this._floatingPlaceholder = coerceBooleanProperty(value); }
private _floatingPlaceholder: boolean = true;
get floatingPlaceholder() { return this._floatingPlaceholder; }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I would prefer floatPlaceholder it reads better with always and never "always float placeholder", "never float placeholder"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah sounds more imperatively.

}
this._floatingPlaceholder = value || 'auto';
}
private _floatingPlaceholder: MD_INPUT_PLACEHOLDER_TYPES = 'auto';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we normally name types like classes, maybe just FloatPlaceholder

private _floatingPlaceholder: boolean = true;
get floatingPlaceholder() { return this._floatingPlaceholder; }
set floatingPlaceholder(value: MD_INPUT_PLACEHOLDER_TYPES) {
if (value && MD_INPUT_PLACEHOLDER_VALUES.indexOf(value) === -1) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would be fine with just not validating this and treating anything other than 'always' and 'never' as auto, up to you though

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 - Notice that invalid values for the floatPlaceholder attribute will automatically fallback to auto due to the getters here

@@ -20,7 +20,7 @@ import {
MdInputContainerUnsupportedTypeError,
MdInputContainerPlaceholderConflictError,
MdInputContainerDuplicatedHintError,
MdInputContainerMissingMdInputError
MdInputContainerMissingMdInputError, MdInputContainerFloatingPlaceholderInvalidError
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: new line

@mmalerba mmalerba added action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Jan 18, 2017
@mmalerba
Copy link
Contributor

lgtm

@andrewseguin
Copy link
Contributor

Can you rebase?

@devversion devversion force-pushed the feat/input-container-placeholder branch from ae203c3 to be7db84 Compare January 27, 2017 18:21
@devversion
Copy link
Member Author

@andrewseguin Done.

@devversion devversion force-pushed the feat/input-container-placeholder branch from be7db84 to 6120f8f Compare January 27, 2017 21:20
@kara kara added pr: needs rebase and removed action: merge The PR is ready for merge by the caretaker labels Jan 31, 2017
@kara
Copy link
Contributor

kara commented Jan 31, 2017

@devversion Can you rebase? Again. Sorry.

@devversion devversion force-pushed the feat/input-container-placeholder branch from 6120f8f to 5ab0ea7 Compare February 1, 2017 06:02
Refactors the `[floatingPlaceholder]` input to be able to specifiy whether the label should always float or not.

There are three options for the `floatingPlaceholder` input binding now

- If set to `true`, the placeholder will *always* float
- If set to `false`, the placeholder will *never* float
- If set to `null`, the placeholder will float if text is entered.

Closes angular#2466
@devversion devversion force-pushed the feat/input-container-placeholder branch from 5ab0ea7 to 025fae4 Compare February 1, 2017 06:09
@devversion
Copy link
Member Author

@kara No problem. Done

@devversion devversion added action: merge The PR is ready for merge by the caretaker and removed pr: needs rebase labels Feb 1, 2017
@kara kara merged commit fb0cf8a into angular:master Feb 3, 2017
@devversion devversion deleted the feat/input-container-placeholder branch February 3, 2017 06:33
@andrewseguin
Copy link
Contributor

Heads up that this is a breaking change for people using the [floatingPlaceholder] input. Can you add a BREAKING CHANGE to your PR description?

@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 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Ability to imperatively float md-input placeholder
6 participants