Include slot for inline 'info icon' before or after label text.

[mitc7862]

Description

For analysis, we will need to provide parameter-based help for various inputs in the form. We'd like to include an inline action that triggers a popover with the helpful information in it.

Acceptance Criteria

• There is a way for developers to include an icon in the label
• You can include the icon before or after the label text
• The icon can be used to trigger a popover

Relevant Info

No response

Which Component

Label

Example Use Case

[macandcheese]

Thanks for submitting, this is a common use case ... could you add designs for the other layouts of input - inline and inline-space-between?

Additionally, the label text (or multiple strings) and child control can be placed in any order, so comps that show some less common arrangements could help us understand where to position the named slot.

I anticipate this will be very commonly used and because of the often tight confines of where it will be used we may want to be somewhat strict in our styling ruleset of the slot. To complicate things for ya @mitc7862 - the design should probably encapsulate some of what was proposed here #2793 - These two elements will likely co-exist at times.

…as a note, you can already do this, you just need to wrap these elements in a div and position as needed.

[TheBlueDog]

Field Maps has many places where we need this and are currently having to build custom input labels to handle it

[macandcheese]

When you say build custom input labels, do you mean just slot the div inside a calcite-label like this?

https://jsbin.com/zexapenizo/1/edit?html,output

I think the issue with potentially styling or placing a named slot is that, like in Mitch's example, there are many potentially valid placements for the tooltip-launching-icon.

[TheBlueDog]

We could certainly start with one as an opinionated pattern that we all use.

[TheBlueDog]

Is there any status on this? Field Maps is having to handle this currently with custom inputs.

[macandcheese]

No update at this time. As an implementation note for when this is looked at - the label functionality to focus the child control may need to have an "exclusionary click zone" or something along those lines to ensure clicking on a, tooltip trigger, for example, doesn't focus the control.

[geospatialem]

Adding the slot will require a major refactor, and will be prioritized after next month's release. cc: @ashetland, @Elijbet

Once prioritized the effort should be coupled with #2793 and #5079.

[ashetland]

Closing in favor of #5079.