Skip to content

feat(input): option to imperatively float placeholder - #2585

Merged
kara merged 4 commits into
angular:masterfrom
devversion:feat/input-container-placeholder
Feb 3, 2017
Merged

feat(input): option to imperatively float placeholder#2585
kara merged 4 commits into
angular:masterfrom
devversion:feat/input-container-placeholder

Conversation

@devversion

@devversiondevversion commented Jan 10, 2017

Copy link
Copy Markdown
Member

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

@googlebotgooglebot 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 jelbournJanuary 12, 2017 00:23
@jelbourn

Copy link
Copy Markdown
Contributor

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

@mmalerbammalerba left a comment

Copy link
Copy Markdown
Contributor

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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
MemberAuthor

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

@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
@devversiondevversion reopened this Jan 13, 2017
@devversiondevversion assigned devversion and unassigned kara and mmalerbaJan 13, 2017
@devversiondevversion added in progress This issue is currently in progress and removed pr: needs review labels Jan 13, 2017
@devversion
devversionforce-pushed the feat/input-container-placeholder branch from ab93d56 to 8932ce5CompareJanuary 14, 2017 15:11
@devversiondevversion added pr: needs review and removed in progress This issue is currently in progress labels Jan 14, 2017
Comment threadsrc/lib/input/input-container.ts Outdated
get floatingPlaceholder(): boolean { return this._floatingPlaceholder; }
set floatingPlaceholder(value) { this._floatingPlaceholder = coerceBooleanProperty(value); }
private _floatingPlaceholder: boolean = true;
get floatingPlaceholder() { return this._floatingPlaceholder; }

Copy link
Copy Markdown
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
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Yeah sounds more imperatively.

Comment threadsrc/lib/input/input-container.ts Outdated
}
this._floatingPlaceholder = value || 'auto';
}
private _floatingPlaceholder: MD_INPUT_PLACEHOLDER_TYPES = 'auto';

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

Comment threadsrc/lib/input/input-container.ts Outdated
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
Copy Markdown
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
Copy Markdown
MemberAuthor

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

Comment threadsrc/lib/input/input-container.ts Outdated
MdInputContainerPlaceholderConflictError,
MdInputContainerDuplicatedHintError,
MdInputContainerMissingMdInputError
MdInputContainerMissingMdInputError, MdInputContainerFloatingPlaceholderInvalidError

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: new line

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

Copy link
Copy Markdown
Contributor

lgtm

@andrewseguin

Copy link
Copy Markdown
Contributor

Can you rebase?

@devversion
devversionforce-pushed the feat/input-container-placeholder branch from ae203c3 to be7db84CompareJanuary 27, 2017 18:21
@devversion

Copy link
Copy Markdown
MemberAuthor

@andrewseguin Done.

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

kara commented Jan 31, 2017

Copy link
Copy Markdown
Contributor

@devversion Can you rebase? Again. Sorry.

@devversion
devversionforce-pushed the feat/input-container-placeholder branch from 6120f8f to 5ab0ea7CompareFebruary 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.
Closesangular#2466
@devversion
devversionforce-pushed the feat/input-container-placeholder branch from 5ab0ea7 to 025fae4CompareFebruary 1, 2017 06:09
@devversion

Copy link
Copy Markdown
MemberAuthor

@kara No problem. Done

@devversiondevversion 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:masterFeb 3, 2017
@devversion
devversion deleted the feat/input-container-placeholder branch February 3, 2017 06:33
@andrewseguin

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

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-botangular-automatic-lock-botBot locked and limited conversation to collaborators Sep 6, 2019
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: mergeThe PR is ready for merge by the caretakercla: yesPR 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

@devversion@jelbourn@mmalerba@andrewseguin@kara@googlebot