-
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): option to imperatively float placeholder #2585
feat(input): option to imperatively float placeholder #2585
Conversation
There was a problem hiding this 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')); |
There was a problem hiding this comment.
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
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 |
ab93d56
to
8932ce5
Compare
src/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; } |
There was a problem hiding this comment.
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"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah sounds more imperatively.
src/lib/input/input-container.ts
Outdated
} | ||
this._floatingPlaceholder = value || 'auto'; | ||
} | ||
private _floatingPlaceholder: MD_INPUT_PLACEHOLDER_TYPES = 'auto'; |
There was a problem hiding this comment.
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
src/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) { |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
src/lib/input/input-container.ts
Outdated
@@ -20,7 +20,7 @@ import { | |||
MdInputContainerUnsupportedTypeError, | |||
MdInputContainerPlaceholderConflictError, | |||
MdInputContainerDuplicatedHintError, | |||
MdInputContainerMissingMdInputError | |||
MdInputContainerMissingMdInputError, MdInputContainerFloatingPlaceholderInvalidError |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: new line
lgtm |
Can you rebase? |
ae203c3
to
be7db84
Compare
@andrewseguin Done. |
be7db84
to
6120f8f
Compare
@devversion Can you rebase? Again. Sorry. |
6120f8f
to
5ab0ea7
Compare
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
5ab0ea7
to
025fae4
Compare
@kara No problem. Done |
Heads up that this is a breaking change for people using the [floatingPlaceholder] input. Can you add a |
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. |
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"always"
, the placeholder will always float"never"
, the placeholder will never float"auto"
, the placeholder will float if text is entered.Closes #2466
R: @kara @jelbourn