feat(select): add label slot

[liamdebeasi]

Issue number: N/A

---

What is the current behavior?

ion-select has no way to accept a custom HTML label

What is the new behavior?

• Adds a label slot to ion-select
• Configures select to pass the textContent of the label slot (if provided) to be the default header on ion-alert. This matches the behavior of passing the label prop contents to be the default header on ion-alert.
• Adds tests

Note: This PR does not account for the notch rendering with fill="outline" that will be handled in a separate PR.

Does this introduce a breaking change?

• Yes
• No

Other information

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[averyrousseau]

Passing this as-is to the alert header gives odd results when using a more complicated label structure. For example, opening this:

<ion-selectplaceholder="Select"><divslot="label"><div>Select a Fruit</div><ion-note>This will be remembered.</ion-note></div><ion-select-optionvalue="apple">Apple</ion-select-option></ion-select>

Leads to this:

While I can't think of a good way to have Ionic solve this automatically, I noticed you can overwrite it manually using interfaceOptions, and that still works:

<ion-selectplaceholder="Select" id="weird-label"><divslot="label"><div>Select a Fruit</div><ion-note>This will be remembered.</ion-note></div><ion-select-optionvalue="apple">Apple</ion-select-option></ion-select><script>constselect=document.querySelector('#weird-label');select.interfaceOptions={header: 'Select a Fruit'};</script>

Maybe we'll just want to document this pattern and leave it as-is?

[liamdebeasi]

Yep, I can make sure this is documented.

[averyrousseau]

Thank you!