Weird hover styles applying on elements (NK 7 and newer)

[sephram]

Describe the bug

On storybook, after upgrading to NK 7 (still happening on version 7.2.0) there are some hover styles being applied to the elements which are not part of our DS. This is not happening if we use Newskit 6.8.0.

To Reproduce

Steps to reproduce the behavior:

1. Go to Factiva DS Storybook
2. Move the mouse over the story elements.
3. See error (if you move to other component stories you can also see the same issue happening)

Expected behavior

Hover styles should not be applied/overridden.

Screenshots / Video / Test Environment

Grabacion.de.pantalla.2023-04-26.a.la.s.11.33.03.mov

Desktop (please complete the following information):

• OS: Mac OS 12.2.1
• Browser Edge, Chrome
• Version: (latest)

[isuscbrmid]

any news on this?

[jps]

@sephram @isuscbrmid
@Vanals is taking a look to see if he can repo if we can we will be taking this through our Thursday planning session.

[Vanals]

Hello!

After a brief examination with @mutebg,
from what we could see, the issue does not appear to be occurring in our storybook, and our components do not contain such global styles.

In fact, it seems that you have some global styling applied to all elements resulting in a white background when hover and if not disabled. Those global styles look like being injected after the "borders" page you've linked is being visited, and then other components break too.

The link was helpful but in order to debug it we would need a reproduction of the issue in a codepen, for instance! At present, it is difficult to determine whether this is a bug originating from Newskit.

If you could please check your repository to see where these styles may be coming from and reproduce the bug, it would be helpful!
But let us know if you have more insight we may investigate.

Thank you.

[sephram]

Hello @Vanals, do you know if style presets format for the TextField component changed? Asking because removing the hover custom stylings seems to fix the issue, but it will impact the component look. Also, this is not happening on NK 6.8, can you share an example of the new stylePresets for the TextField

[Vanals]

Hi @sephram !

Yes, we did consider you saying in NK 6.8 it was working but it may be due to how you implemented Newskit.
We can see for instance that you do have some workaround such as

    // Workaround, since the disabled placeholder color was not being applied
    '& input:disabled::placeholder': {
      color: '{{colors.inkNonEssential}}',
    },

And anyway we see that you use selectors within the CSS state keys(base, hover, etc.) which are not supposed to be there. Only CSS properties and plain objects are a scenario we safely handle, the rest is a bit unknown, typescript would have flagged such practice.

We believe some not standard practices may be breaking your CSS.
We think you should get a more clear understanding of what is going on on your side, and again if you can provide a reproduction of the bug in isolation even better, but to us so far seems coming from your implementation and not a Newskit bug itself. We could not spot what may be.

About any changes in Text Field, you can find the defaults of the TextField here: https://github.com/newscorp-ghfb/NewsKit/blob/main/src/text-field/defaults.ts.
Clicking on history you can see what may have changed in the previous commits, also please check the release notes, which may help you.

Same for the Style preset: https://github.com/newscorp-ghfb/NewsKit/blob/main/src/theme/presets/style-presets.ts

Let us know if you find out anything 👍 , or have any more clues.

[Daniel-M-V]

Hi @Vanals,

I was checking if removing the "workaround" selectors actually fixed the issue, but it seems the selectors present in the state-keys seem to be unrelated to the bug.

I was however able to determine that there is some relation between the color property in the base-state-key object and the hover-state-key object. Attached image shows the minimum needed to trigger the hover bug.

Hope this helps pinpoint the issue.

[mutebg]

@Daniel-M-V The issue is from the triple curly bracket after color.inkBase }}}, our parser handles only 2 of these, which means 1 bracket is left inside the CSS, and works like closing bracket for the selector.

[Daniel-M-V]

Hi @mutebg,
I think that triple curly-bracket was indeed the cause of the problem.
Odd how no one noticed that before now... 😅. Thank you.

I tested briefly by correcting the triple bracket and it seems to fix the issue.
Hope someone else can confirm it before closing this.