[UnifiedFieldList] Show drag handle on item hover

[jughosta]

• Resolves [UnifiedFieldList] Use drag icon #168856

Summary

As per comment in #171572 (comment)

As a simple way to mitigate this issue, what if we changed it so that on hover/focus of a field list item we fade-out the token and fade-in the drag handle to replace the token (in the same position)? In doing so, we could also keep the old translate x-axis transition (where the field list item slides a few pixels to the right) to emphasize that it's draggable. That little bit of extra movement might be good, if the appearance of the drag handle is no longer pushing the text (given the above suggestion).

Checklist

• Unit or functional tests were updated or added to match the most common scenarios
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[jughosta]

/ci

[jughosta]

/ci

[jughosta]

@elasticmachine merge upstream

[jughosta]

/ci

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[dej611]

Tested locally with Safari 👍

I see in the original issue the token icon to be shown next to the new omnidirectional drag icon: is that still planned after this?

[jughosta]

@dej611

I see in the original issue the token icon to be shown next to the new omnidirectional drag icon: is that still planned after this?

No, we tried it in #171572 but it creates content shift so this PR uses a different approach (more in #171572 (comment) ).

[kertal]

Code LGTM 👍 Tested locally with Safari, Firefox, Chrome, Edge. Works as expected. I like this subtile change!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 728fa09

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
discover	592.3KB	594.6KB	+2.3KB
lens	1.4MB	1.4MB	+2.3KB
total			+4.6KB

History

• 💚 Build #184895 succeeded 2940b6b
• 💚 Build #184389 succeeded 92f63b5
• 💔 Build #184371 failed 0c42380
• 💔 Build #184358 failed d6ec83d

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @jughosta

[MichaelMarcialis]

This looks great. Thanks, @jughosta!