fix(NcInputField): Bring input field height to 44px and fixes its focus feedback

[marcoambrosini]

• Resolves TextInput is smaller than Multiselect #3376

* bring input field height to 44px and fixes its focus feedback

Screen.Recording.2023-10-31.at.13.00.37.mov

* bring select height down to 44px and improves a bit the looks of the select chips

[nimishavijay]

Nice! Definitely an improvement. Suggestion: for the tags itself, we use a background color instead of more borders:
(also looks a bit off for single select)

When we show buttons and inputs next to each other, the alignment still seems to be an issue. when the field is focused, technically the button and input field are center aligned, but when unfocused it looks like it is a couple of pixels too low. What do you think?

Recording.2023-11-01.141616.mp4

Also, the bottom of the label for the input field gets cut off on focus for some resolutions, and the close button on the right is not centered (dunno if it is related to this PR)

[marcoambrosini]

Suggestion: for the tags itself, we use a background color instead of more borders

@nimishavijay I tried that but it results in not enough contrast with the user avatars in user selects.

[JuliaKirschenheuter]

Hi @marcoambrosini,

unfortunately the issue with truncation got worse ;(

Could you please use ARCToolkit tool with "Check Text Spacing" function to check the results?

[nimishavijay]

I tried that but it results in not enough contrast with the user avatars in user selects.

Do we need a lot of contrast there though? I imagine it would similar to the user bubble when you are @ mentioning a user on Talk. The x button on each user, which I am assuming is the only clickable element, would have enough contrast against the background anyway, what do you think?

[marcoambrosini]

@nimishavijay this is very bad in talk too. I guess we need to rethink the avatars again. Without even talking about accessibility, this is not acceptable from a visual design standpoint. (The colors have almost exactly the same luminance and it looks like a bug)

I'll remove the border here and raise an issue with the avatars

[marcoambrosini]

@JuliaKirschenheuter @nimishavijay could you please review again?

[susnux]

The trailing button is not centered anymore:

[JuliaKirschenheuter]

Trancation is gone ;)

But a placeholder is not centered

I would say we can live with it, all design improvements can be done later

[jancborchardt]

Agree with @JuliaKirschenheuter :) Let’s merge it as is now and @marcoambrosini go for an improvement pull request.

[marcoambrosini]

@JuliaKirschenheuter are you sure that you don't have any CSS interfering with the component there?
It looks good in the style guide

Screen.Recording.2023-11-08.at.09.59.05.mov

@susnux here's a fix for the misaligned button