[List/List Item] Add non-interactive option to remove hover/pointer changes

[geospatialem]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

We restored list's pointer and hover states for consistency in #6700, as it was previously supported and discussed when implemented in #6123.

We should add a new selection mode to remove the hover/pointer behavior for someone that wants the existing selectionMode of "none" and different styling.

Acceptance Criteria

Add a new selection mode to remove the hover/pointer behavior for someone that wants the existing selectionMode of "none" and different styling.
Maintain the restored pointer behavior when selectionMode is "none"

• See Calcite Design Solution below for final implementation.
• Determine if other components, such as chip-group and chip should also have similar behavior. If so, a new issue, or issues if multiple components are impacted, can be created
  • Note (via Aaron 🧠): not needed as the components do not have interaction states. When chip is used on its own or in a chip-group with selection-mode="none" they are not interactive.

Relevant Info

Created as a result of the efforts of #6700 and related #6123.

Refer to #6700 (comment) for more details.

This would also close #5664 based on this comment.

Which Component

• list
• list-item

Example Use Case

1. 2.2.0 example with default: https://codepen.io/geospatialem/pen/ExMvGZJ
2. 2.2.1-next.1 example with pointer: https://codepen.io/geospatialem/pen/XWGaopO

Priority impact

p4 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

Calcite Design Solution

Based on team discussion, we recommend the following:

Add an interaction-mode=“interactive” (default) | “static” prop

If using static and any selection-mode other than none, selection-appearance modes would be affected in the following ways:

• selection-appearance=“icon” would still function in the static mode. The icon would remain the hit area for selection, but interaction styling and pointer changes would be removed from the main content area.
• selection-appearance=“border” would conflict with static mode.
  • This appearance mode necessitates the entire item being the hit area for selection.
  • Setting a selection mode, a border appearance, and static together would produce a developer warning message and fallback.
    • Falling back to interactive may make the most sense here as falling back to an icon appearance feels more disruptive and could be potentially more difficult for a user to debug.
    • Possible message (final language TBD): “selection-appearance=“border” requires interaction-mode=“interactive”.

[asangma]

➕ from me on this one.
We could use this.

[macandcheese]

Another option could be an ‘interactionMode’ prop with “static” / “interactive” values like we added in Table. Maybe not quite the same but it could enable this in all selection modes, not just a single one.

This could make the label area non focusable / hoverable in all selection modes, leaving the selection affordance and any action-slots interactive.

[ashetland]

Not sure how that would work in selection-appearance="border"

[ashetland]

Broad question about this one. Is this a selection mode or is it something that would disable selection modes altogether? Like readOnly? If readOnly, does that then get confusing when actions are slotted? Maybe not?

[ashetland]

Added design recommendations to the top. @geospatialem Not sure if we want to update the title or anything else?

[github-actions]

cc @geospatialem, @brittneytewks