[Tree] Add hover states

[geospatialem]

Description

Add hover states to the tree component.

Provides a distinct hover state between:

• Selecting & expanded a parent item,
• Just expanding a parent, and
• Just the triggering the item's action.

The background also consistently extends to the left when hovering over the icon and text container, whether it is a parent item with decedents, item without decedents, or child item.

cc: #6912, #6926

Acceptance Criteria

Pertains to the criteria defined by @SkyeSeitz in #6912 (comment):

Link to prototype with different hover state options. I am favoring the second in this list labeled "Background hovers without action" as it provides distinct hover states between: selecting & expanded a parent item, just expanding, and just the triggering the action. The background also consistently extends to the left when hovering over the icon + text container, whether it is a parent item with decedents, item without decedents, or child item.

Screen.Recording.2023-05-04.at.3.37.40.PM.mov

Relevant Info

Remaining from tree enhancement work in #6926 (comment) for Online R02 to add hover states to the tree compnent.

Which Component

tree

Example Use Case

No response

Priority impact

p3 - want for upcoming milestone

Esri team

Calcite (design)

[SkyeSeitz]

Link to prototype of finalized hover behavior.

[ashetland]

Link to prototype of finalized hover behavior.

Updates to these designs may occur as a result from design efforts in epic #7181 related to this comment in issue #6700.

[geospatialem]

Added to the current design sprint for a final pass before implementation.

[ashetland]

Added to epic #7733 for system-wide considerations.