Skip to content

feat(select): add label slot #27468

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

Merged
merged 13 commits into from
May 15, 2023
Merged

feat(select): add label slot #27468

merged 13 commits into from
May 15, 2023

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented May 12, 2023

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
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions github-actions bot added the package: core @ionic/core package label May 12, 2023
@liamdebeasi liamdebeasi changed the title 3532 base feat(select): add label slot May 12, 2023
@liamdebeasi liamdebeasi marked this pull request as ready for review May 12, 2023 19:46
@liamdebeasi liamdebeasi requested a review from a team as a code owner May 12, 2023 19:46
const labelSlot = el.querySelector('[slot="label"]');

if (labelSlot !== null) {
return labelSlot.textContent;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

odd header

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, I can make sure this is documented.

Copy link
Contributor

@averyjohnston averyjohnston left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@liamdebeasi liamdebeasi merged commit 168aad8 into FW-3532 May 15, 2023
@liamdebeasi liamdebeasi deleted the 3532-base branch May 15, 2023 19:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants