Enterprise: Toolbar: A toolbar with a searchfield in a list details div text is same color as searchfield

[Sovia]

Describe the bug
The text color matches the searchfield's color, so you can't read it. This is happening for a searchfield in a toolbar in a list details area. Also, the clear button is over the magnifiying glass button when there is a value in the searchfield, but it's collapsed.

To Reproduce
Steps to reproduce the behavior:

1. Copy list-detail.zip into your codebase, and navigate to it.
2. (TJM) On branch http://localhost:4000/patterns/list-detail.html i put it
3. Click into the toolbar search field (the magnifying glass icon) and start typing
4. See error

Expected behavior
Need to be able to see what is being typed.

Version
v4.19.0-dev

Screenshots

Platform

• All

[tmcconechy]

Additionally.

• the placeholder text is the same color as the text
• when search is collapsed and you hover an x appears when it shouldnt

[tmcconechy]

Wondering if this worked before or is a new combination? Just wondering if we broke something

[Sovia]

I feel like it was working in the landmark case before. I'm just not sure when. It looks like a rule in _list-detail.scss is what is setting the current color to transparent.

This is happening in our mainline, so it's probably been there since v4.17 . I've put in a temp fix in the landmark code
// Temporary fix until https://github.com/infor-design/enterprise/issues/2075 is fixed and available .list-detail .toolbar .searchfield-wrapper input { color: inherit; }

for now.

[clepore]

Very very interesting. So something was probably done to "unmask" this and it's very odd that at one point we set the color: transparent. Honestly I think we can remove that whole selector in our codebase, but we'll investigate.

[EdwardCoyle]

Was able to remove this whole snippet, and it seems like that was the culprit

[janahintal]

The text color is now different as the search field however, The text color is the same with placeholder & when search is collapsed and you hover an x appears when it shouldn't.
Verified in: http://4180-rc2-enterprise.demo.design.infor.com/patterns/list-detail.html

[janahintal]

Hi @tmcconechy, Already tested in all OS browsers and noticed that the placeholder is not showing in Windows10 IE11 browser.
Will move to QA failed. Thank you.

Tested in: http://4180-rc3-enterprise.demo.design.infor.com/patterns/list-detail.html

[clepore]

@EdwardCoyle since we have this working in most browsers, let's split @janahintal 's latest finding as a separate issue (for 4.19 sprint) so we can release 4.18.0.

[EdwardCoyle]

Raised #2093 for that one