List Item Group

[asangma]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

Some UI enhancement requests for ListItemGroup.

Background color and hover states

ListItemGroup uses foreground-2. This can conflict with anything that use ui-background. It also makes for weird hover states. Suggest foreground-1 or even transparent.

Current

Current hover state

Using foreground-1 or transparent

Alignment

Labels don't align. This might be from the selection border?

Caret spacing

It appears that the spacing is 1rem start and 0.75rem end. Visually, this feels imbalanced.

Expand/collapse versus selection

The hit area for expand/collapse versus selection is confusing. Suggest visually distinguishing between the two hover states.

This may require updating the "invisible" selection border color on hover.

Acceptance Criteria

Not breaking stuff.

Relevant Info

No response

Which Component

List Item Group

Example Use Case

SDK LayerList, BasemapLayerList, and TableList.

Priority impact

p3 - want for upcoming milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[asangma]

cc @driskull

[macandcheese]

From a UI standpoint, IMO the List Item Group is an extremely heavy element, the combination of vertical height and font weight make these Lists quite ... large. I guess this applies to the items themselves, not just the groups. Maybe we can look to reduce the height of all of these by a bit. Over an entire UI this could be a drastic improvement.

[asangma]

@macandcheese Agreed! :)

[ashetland]

This Figma file covers designs for this issue and multiple related design revisions for List. cc @driskull

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍯 Verified on 2.8.0-next.10