feat(select): add label slot #27545
feat(select): add label slot #27545
Conversation
|
|
| @@ -576,7 +586,7 @@ export class Select implements ComponentInterface { | |||
| label = this.getLabel(); | |||
| labelText = label ? label.textContent : null; | |||
| } else { | |||
| labelText = this.label; | |||
| labelText = this.labelText; | |||
There was a problem hiding this comment.
Shouldn't this be this.labelText()?
There was a problem hiding this comment.
No, this.labelText is a getter which binds the property to a function. When you look up this.labelText the function is automatically called: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get
| /** | ||
| * If no label is being used, then we | ||
| * do not need to estimate the notch width. | ||
| */ | ||
| !this.hasLabel || | ||
| /** | ||
| * If the label property is being used | ||
| * then we can render the label text inside | ||
| * of the notch and let the browser | ||
| * determine the notch size for us. | ||
| */ | ||
| this.label !== undefined |
There was a problem hiding this comment.
Optional: As far as the label checks go, !this.hasLabel || this.label !== undefined is equivalent to this.label === undefined || this.label !== undefined, which is always true, so you could combine these checks into this.labelSlot === null. I can understand wanting to black-box the hasLabel logic in case it changes in the future, though, so feel free to leave this as-is.
There was a problem hiding this comment.
The concern I have with this change is it does not consider if both the label slot and prop are defined. If we only checked this.labelSlot === null then the code would attempt to set the notch width if both the label slot and prop are defined.
However, I could change the check to something like this:
this.label === undefined && this.labelSlot !== nullThere was a problem hiding this comment.
Ah, true! Sure, that works for me.
There was a problem hiding this comment.
updated in ccc3b60
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: resolves #26838
What is the current behavior?
Developers are unable to pass custom HTML as a label to
ion-select.What is the new behavior?
ion-selectso developers can pass custom HTML for the label.Does this introduce a breaking change?
Other information
Docs PR: ionic-team/ionic-docs#2971