web-components icon indicating copy to clipboard operation
web-components copied to clipboard

--vaadin-input-field-hover-highlight is not applied to vaadin-text-area

Open MarcinVaadin opened this issue 1 year ago • 1 comments

Description

--vaadin-input-field-background is applied both to vaadin-text-area and vaadin-text-field but --vaadin-input-field-hover-highlight is applied only for vaadin-text-field

Expected outcome

Should be styled in consistent way

Minimal reproducible example

Add:

--vaadin-input-field-background: yellow;
--vaadin-input-field-hover-highlight: red;

to text area and hover mouse

Steps to reproduce

As above

Environment

Vaadin version(s): 24.4.0-beta3 OS: Macos

Browsers

No response

MarcinVaadin avatar May 17 '24 10:05 MarcinVaadin

I think it's related to #1384. As mentioned there, in vaadin-text-area we set hover background differently:

The text-field hover and activation effect is done using a pseudo element. That doesn’t work nicely with the scrollable container of the text-area. So, we are using a plain background-color transition for the text-area currently

https://github.com/vaadin/web-components/blob/dc9b8c746ad414a531222f62237821b5d44eaee5/packages/text-area/theme/lumo/vaadin-text-area-styles.js#L40-L42

web-padawan avatar May 17 '24 10:05 web-padawan