feat(SelectE): Add No results

[thyhjwb6]

Related issue

Closes #2960

Overview

If there are no results for the filter then a message should be displayed as per design.

Link to preview

https://autocomplete-noitems.netlify.app/?path=/story/autocomplete-experimental--default

Reason

The user needs feedback and this is in the spec.

Work carried out

• [x] Add message

Screenshot

[k9dh3zij]

Thanks @thyhjwb6 3 things:

1. I really like the suggestion by @jpveooys to truncate the user input if it's longer than what we can display

2. This may be covered by another ticket - just making sure it doesn't get missed

3. There is something funny happening with the font size only the first time a match is not found

Current behaviour (the first time there is a non-match):

https://user-images.githubusercontent.com/73531035/149326379-e2fecf3d-d097-4a4e-9a34-65131856ba12.mov

Expected behaviour (this is what actually happens after the first non-match):

https://user-images.githubusercontent.com/73531035/149326234-074ec3f9-c2a3-4e96-91fa-dc10ba6f3c46.mov

[thyhjwb6]

@jpveooys

• label overlap issue was going to be covered on another PR but I have added the fix here

@k9dh3zij

1. ✅
2. ✅
3. ✅

[thyhjwb6]

@k9dh3zij the latest branch has been deployed.

With regards to 3, I thought there was a fix but it appears that is not the case. I am separating this issue out.

[k9dh3zij]

👍 Thanks @thyhjwb6 1 and 2 working great now!

[sonarcloud[bot]]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

77.8% Coverage
0.0% Duplication