- 
                Notifications
    You must be signed in to change notification settings 
- Fork 6.8k
feat(input): option to imperatively float placeholder #2585
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
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
          
        
      | 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
floatPlaceholderinput 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