Uh oh!
There was an error while loading. Please reload this page.
feat(select): add label slot - #27545
Conversation
|
| 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
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
| /** | ||
| * 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.
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