Proposal: Token picker usability improvements

[ek68794998]

Currently, token picker has some usability issues. Particularly, if a single action (i.e., a single token picker section header) has a large number of tokens, there is no way to quickly navigate to the bottom of it. While this aligns with what we saw in v1 designer, usability concerns have been raised for users who have hundreds of tokens to navigate through.

I'm expecting to take this work on from our side rather than request that LAUX team handles it; however, I wanted to run the proposal by the team first to get feedback or a ✅.

Alongside this, we had a North Star idea of how the token picker design would appear, and so I'm also including in this proposal the aspect of updating the token picker to a more modern design.

Usability proposal: Include "see more" and "see less" for tokens

This would be a functional change to show a maximum of 5 actions in a section by default, and allow users to expand/collapse the section as needed to access all items in that section.

Since the expression picker already has this, overall there would be few changes here:

Visual proposal: Overall design tweak

The visual changes proposed per this discussion are to bring icon sizes, font sizes and contrast, spacing, and UI elements a design refresh to align more closely with Fluent and accessibility guidelines. North Star would be per the below.

Also as a bonus, we'd like sticky headers when scrolling. If this is something I can pull off without too much technical complexity, I'll keep it in scope for this proposal as well.

References

References to accompany the proposals above.

Reference: v1 designer today

Below is an image showing how v1 designer appears for us today. Left is the standard picker; right is the revamped picker that we cut from GA release due to v3 being developed.

Reference: v3 designer today

Below is an image for reference of what v3 designer looks like today.

[Eric-B-Wu]

I think overall this would be a much-appreciated feature in both LAUX and PA. We had a planned item to implement a token filter that would have this (see more, see less idea) which ended up not making our GA deadline, but was planned for something in the future - please feel free to reach out to me if there's anything on the token picker that you'd like more information on to implement this feature