Gutenberg: Experimental Link UI - fix interface bugs and issues

[getdave]

On testing, I've noticed a few things that might be improved:

• [x] On the first search, the loading spinner seems to be rendering partially outside of the popover. It's more noticeable when setting network speed to something slower in the dev tools.
• [x] The main input search input seems to have part of its bottom border cut-off when the list of suggestions appears #18292
• [x] The gradient at the top and bottom of the suggestions list hints that there are more results, but it shouldn't be displayed if the user can't scroll anymore in that direction. I think you can see it ever so slightly on the last item when hovering over it. #18292
• [ ] ~A usability thing, I wonder if the URL item in the search results should appear first, as it has the instructions 'Press ENTER to add this link'.~ Now a separate Issue.

_Originally posted by @talldan in https://github.com/WordPress/gutenberg/pull/17846#issuecomment-546828662_

Also see this idea https://github.com/WordPress/gutenberg/pull/17846#issuecomment-546638190

[obenland]

Let's try and fix these issues in separate PRs?

[retrofox]

On the first search, the loading spinner seems to be rendering partially outside of the popover. It's more noticeable when setting network speed to something slower in the dev tools.

Taking this one, Dave

[retrofox]

Loading spinner https://github.com/WordPress/gutenberg/pull/18278 PR.

[WunderBart]

The main input search input seems to have part of its bottom border cut-off when the list of suggestions appears

Picking this one up!

[obenland]

Picking this one up!

Gah, I'm sorry, I didn't see that 😔

[obenland]

The gradient at the top and bottom of the suggestions list hints that there are more results, but it shouldn't be displayed if the user can't scroll anymore in that direction. I think you can see it ever so slightly on the last item when hovering over it.

The button margin is 10px and the suggestion list padding is 8px. So if we decreased that gradient from 20px to 18px, that should probably do it.

[getdave]

A usability thing, I wonder if the URL item in the search results should appear first, as it has the instructions 'Press ENTER to add this link'.

@karmatosed @shaunandrews Can you advise if you agree with this?

[getdave]

A usability thing, I wonder if the URL item in the search results should appear first, as it has the instructions 'Press ENTER to add this link'.

As this is hanging around I've broken this out into a separate Issue which can be accepted as Blocking or dismissed by @mtias / @talldan as necessary.