Select component: add a suffix to .form-control-input

[newdigate]

We added a suffix (part, slot) to the select component

Having the suffix slot/part allows us to make the suffix in the select component consistent with the suffix in our sl-input components.

I think this feature will be useful for other projects too.

Many thank you for such an amazing, awe-inspiring component library! I hope this change is helpful for you :)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	Jun 11, 2024 4:27pm

[claviska]

I believe @lindsaym-fa's comment from the previous PR applies here.

Thanks for the PR, @newdigate! I'd love to know more about your use case. Would you be willing to share screenshots or more info about how you use suffix icons in select elements?

#2062 (comment)

[newdigate]

Hi, @lindsaym-fa

We have a suffix in the dropdown component which we use as a button for the user to change their dropdown preferences:

We are looking to have the same suffix feature in the select component

[newdigate]

@claviska, @lindsaym-fa
A better example is this:

The input component has prefix and suffix:

However the select component only has a prefix:

We required the select component to also have a suffix part. From our perspective, this is more consistent.

[lindsaym-fa]

Thank you, @newdigate. 🙏 We appreciate the clean PR, but we're hesitant to bring this feature into the library. Importantly, prefix and suffix slots are intended to be presentational and haven't been vetted for use with interactive controls. Our concern is that introducing a presentational suffix competes unnecessarily with sl-select's caret and is prone to poor UX. (This isn't necessarily a reflection of your use case, but the general risks.)

[newdigate]

hi @lindsaym-fa

here is a non-interactive use-case:

we have a select component and we want to indicate the selected user is out-of-office:

[lindsaym-fa]

Ah! That's a neat one. If we tailored the docs for a use case like this, I'd be happy to support a suffix slot.

We also recently had a discussion (#2053) about better documenting support for presentational text in prefix and suffix slots. @claviska, what do you think?

[claviska]

It's a compelling use case, for sure. Like you said, as long as the docs are updated to reflect it.

[martinemmert]

I came here to search for the same thing. Having a Prefix Slot to add further presentational content for our users would enable us to rebuild this Select2 select element with Shoelaces.

[claviska]

Thanks for the great use case! We'll get the docs updated and get this one in for the next release.