Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
290 stars 75 forks source link

[List] Add an expand/collapse tooltip for opening a list item #8613

Closed sagewall closed 10 months ago

sagewall commented 10 months ago

Check existing issues

Description

Please add an expand/collapse tooltip for opening a list item.

Acceptance Criteria

An expand/collapse tooltip for opening a list item

Relevant Info

No response

Which Component

List

Example Use Case

The LayerList widget in the ArcGIS Maps SDK for JavaScript would like to add an "Expand" tooltip, similar to the way it was before the calcite refactor. Currently the tooltip is the layer name or the list item content. https://codepen.io/sagewall/pen/WNmoOxY

Priority impact

p3 - want for upcoming milestone

Calcite package

Esri team

ArcGIS Maps SDK for JavaScript

sagewall commented 10 months ago

cc @driskull @geospatialem

github-actions[bot] commented 10 months ago

Installed and assigned for verification.

geospatialem commented 10 months ago

The "expand" and "collapse" tooltips have been added - verified in 2.2.0-next.22 with the following html:

<calcite-list>
    <calcite-list-item label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails">
        <calcite-action slot="actions-end" icon="layer" text="Trails layer"></calcite-action>
       <calcite-list-item label="In the Clouds trail" description="Moderate difficulty" value="hiking-trails">
        <calcite-action slot="actions-end" icon="layer" text="Trails layer"></calcite-action>
    </calcite-list-item>
    </calcite-list-item>
    <calcite-list-item label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
        <calcite-action slot="actions-end" icon="layer" text="Waterfalls layer"></calcite-action>
    </calcite-list-item>
    <calcite-list-item label="Rivers" description="Large naturally flowing watercourses." value="rivers">
        <calcite-action slot="actions-end" icon="layer" text="Rivers layer"></calcite-action>
    </calcite-list-item>
</calcite-list>

verify-list-tooltips