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.

[averyjohnston]

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

<ion-select placeholder="Select">
  <div slot="label">
    <div>Select a Fruit</div>
    <ion-note>This will be remembered.</ion-note>
  </div>
  <ion-select-option value="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-select placeholder="Select" id="weird-label">
  <div slot="label">
    <div>Select a Fruit</div>
    <ion-note>This will be remembered.</ion-note>
  </div>
  <ion-select-option value="apple">Apple</ion-select-option>
</ion-select>

<script>
  const select = 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.

[averyjohnston]

Thank you!