Enhancement: Add slots to components that have props for external content

[benelan]

Description

Proposed by @asangma on Teams and summarized in this wiki page.

Acceptance Criteria

Add slots to the components (listed below) with props that handle external content. The most common scenario is icons.

Which Components

• Action
• Alert
• Avatar
• Button
• Chip
• FAB
• Radio Group Item
• Tab Title
• Tile
• Tile Select
• Tree Item
• Accordion Item
• Notice

Example Use Case

 <calcite-button>Button
     <calcite-icon icon="share" slot="content-start"/>
</calcite-button>

Instead of In addition to the current method

 <calcite-button icon-start="share">Button</calcite-button>

Related issues

• Enhancement: Add a slot in List Item for specialized content or a slot for label and a slot for description #3032
• Enhancement: Add ability to add tooltip to Icon in List component #2878
• Enhancement: Modify list to support layer-list design #968
• Enhancement: [calcite-tree] Support actions/menu in tree items #3127
• Option to change checkbox behaviour in tree with selectionMode="ancestors" #3608
• [Accordion item] Allow customized content in heading and description #6567

[macandcheese]

Can we clarify the icon props suggestion? I was under the impression those would remain. It seems like an inconvenience and an invitation for design fragmentation to remove them on something like a button.

[benelan]

My understanding is that the prop would stay and then some would be deprecated on a case by case basis. I was just tasked with documenting the proposal by @asangma so I'll wait for him to clarify.

[rweber-esri]

Hub has similar needs for calcite-accordion-item where we'd like to:

• customize the content passed into current heading and description props so line-clamp styles can be applied
• tooltips for icons rendered via icon-start & icon-end.

Adding additional slots to those regions of the component would help us to achieve above.

[jcfranco]

@rweber-esri Thanks for sharing your use case.

• customize the content passed into current heading and description props so line-clamp styles can be applied

We had toyed with the idea about making the header & description into separate helper components that could potentially be used for this, but haven't discussed since. @geospatialem I think this could be another task for this epic.

• tooltips for icons rendered via icon-start & icon-end

Are the item icons being used as actions? If so, I'd suggest using the accordion-item's start/end action slots instead (see codepen). Sidebar, those slots don't seem to be documented. I'll create a doc issue for this.

[macandcheese]

Is this still relevant @asangma @benelan?

It seems like many of the listed items already have had slots added (alert, notice, tree item, accordion item) since this was opened.

In other cases, I’m not sure I agree with the suggestions in the wiki - do we need to add extra slots to simple components like button, chip, etc. that already offer a default slot? If someone really wants to put an image inside a button and style it differently than our provided icon props, they can use the default slot.

The “action icon that invokes tooltip” slot use case @rweber-esri mentions totally makes sense in accordion item, tree item, notice. However where we accept icon properties they are generally supportive icons that themselves should be described by accompanying text and shouldn’t need a slot for a tooltip.

[geospatialem]

Need to update the description of the ask above based on the current consistency patterns across the design system.

This may no longer be needed after evaluation is determined.

[jcfranco]

+@brittneytewks

[macandcheese]

Can this be closed? The existing open issues should be sufficient for cases we've decided we want to support.

Others, like Buttons, Avatar, etc., I don't believe are valid. We've also talked about increasing the functionality of the built-in icon props to support external assets, which would further cover our bases there. cc @jcfranco @geospatialem

[geospatialem]

Closing per the above conversation.

Some issues have been mitigated, which include: #3032, #3127 and #6561.

Additional issues have been opened and can be tracked independently, which include: #968, #3608, #6565, and #6567.

New issues can be added on a per component basis as they come up.