Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
3 of 8 tasks
geospatialem opened this issue Jan 23, 2024 · 8 comments
Closed
3 of 8 tasks

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

geospatialem opened this issue Jan 23, 2024 · 8 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Hub Issues logged by ArcGIS Hub team members. ArcGIS Map Viewer Issues logged by ArcGIS Map Viewer team members. c-list Issues that pertain to the calcite-list component Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library p4 - not time sensitive User set priority status of p4 - not time sensitive ready for dev Issues ready for development implementation.
Milestone
2024-10-29 - Oct ...

Comments

@geospatialem
Copy link
Member

geospatialem commented Jan 23, 2024 •
edited by ashetland
Loading

Check existing issues

Description

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

cursor

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.

default

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. static removes interaction styling and pointer changes.

If using static with selection-mode="single" | "single-persist" | "multiple", the 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”.
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. design Issues that need design consultation prior to development. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 23, 2024
@github-actions github-actions bot added Calcite (dev) Issues logged by Calcite developers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive calcite-components Issues specific to the @esri/calcite-components package. labels Jan 23, 2024
@geospatialem geospatialem mentioned this issue Jan 23, 2024
Closed
@ashetland ashetland added the c-list Issues that pertain to the calcite-list component label Jan 24, 2024
@ashetland ashetland self-assigned this Jan 24, 2024
@ashetland ashetland added 1 - assigned Issues that are assigned to a sprint and a team member. p - low Issue is non core or affecting less that 10% of people using the library and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 24, 2024
@asangma
Copy link
Contributor

asangma commented Feb 28, 2024

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

@macandcheese
Copy link
Contributor

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
Copy link
Contributor

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

@ashetland
Copy link
Contributor

ashetland commented Mar 8, 2024 •
edited
Loading

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?

@brittneytewks brittneytewks removed this from the 2024-03-26 - Mar Release milestone Mar 21, 2024
@ashetland
Copy link
Contributor

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

@ashetland ashetland added the ready for dev Issues ready for development implementation. label Apr 25, 2024
@github-actions github-actions bot added 0 - new New issues that need assignment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Apr 25, 2024
@github-actions GitHub Actions
Copy link
Contributor

cc @geospatialem, @brittneytewks

@geospatialem geospatialem added estimate - 5 A few days of work, definitely requires updates to tests. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Apr 25, 2024
@geospatialem geospatialem added the p - medium Issue is non core or affecting less that 60% of people using the library label Apr 30, 2024
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Apr 30, 2024
@geospatialem geospatialem mentioned this issue Apr 30, 2024
Closed
@ashetland ashetland mentioned this issue Jul 19, 2024
Closed
@aPreciado88 aPreciado88 self-assigned this Aug 27, 2024
@aPreciado88 aPreciado88 added 1 - assigned Issues that are assigned to a sprint and a team member. 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. 1 - assigned Issues that are assigned to a sprint and a team member. 2 - in development Issues that are actively being worked on. labels Aug 27, 2024
@aPreciado88 aPreciado88 added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 23, 2024
@github-actions github-actions bot added the p4 - not time sensitive User set priority status of p4 - not time sensitive label Sep 24, 2024
@aPreciado88 aPreciado88 mentioned this issue Oct 1, 2024
Merged
aPreciado88 added a commit that referenced this issue Oct 21, 2024
@aPreciado88
feat(list, list-item): add non-interactive option to remove hover/poi…
c149b55 
…nter changes. (#10473)

**Related Issue:**
[#8634](#8634)

## Summary

- Add `interaction-mode="interactive" (default) | "static"` prop.
- Setting `interaction-mode="static"` and `selection-appearance="icon"`
removes hover/pointer changes from main content area.
- Setting `interaction-mode="static"` and
`selection-appearance="border"` falls back to interactive hover/pointer
changes and logs console warning message.
- Setting `interaction-mode="static"` and `selection-mode="none"`
removes hover/pointer changes.
@aPreciado88 aPreciado88 added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Oct 21, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned aPreciado88 Oct 21, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Oct 21, 2024
@geospatialem
Copy link
Member Author

Verified in 2.14.0-next.15 when list has interaction-mode="static" and "selection-mode="none":

<calcite-list interaction-mode="static" selection-mode="none">
    ...
</calcite-list

verify-interaction

benelan pushed a commit that referenced this issue Feb 8, 2025
@aPreciado88 @benelan
feat(list, list-item): add non-interactive option to remove hover/poi…
cb4a464 
…nter changes. (#10473)

**Related Issue:**
[#8634](#8634)

## Summary

- Add `interaction-mode="interactive" (default) | "static"` prop.
- Setting `interaction-mode="static"` and `selection-appearance="icon"`
removes hover/pointer changes from main content area.
- Setting `interaction-mode="static"` and
`selection-appearance="border"` falls back to interactive hover/pointer
changes and logs console warning message.
- Setting `interaction-mode="static"` and `selection-mode="none"`
removes hover/pointer changes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Hub Issues logged by ArcGIS Hub team members. ArcGIS Map Viewer Issues logged by ArcGIS Map Viewer team members. c-list Issues that pertain to the calcite-list component Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - 5 A few days of work, definitely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library p4 - not time sensitive User set priority status of p4 - not time sensitive ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2024-10-29 - Oct Milestone
Development

No branches or pull requests
7 participants
@macandcheese @geospatialem @asangma @DitwanP @ashetland @brittneytewks @aPreciado88