fix(Anchor:) anchor modifier .dnb-anchor--no-hover

[langz]

Summary

As of today we offer a few "anchor modifier classes", see https://eufemia.dnb.no/uilib/components/anchor/demos/#anchor-modifiers. Two of them, .dnb-anchor--no-hover, and .dnb-anchor--no-style(which is supposed to have no style and no hover) doesn't seem to work as expected, see the following video:

Screen.Recording.2023-07-28.at.12.03.06.mov

This PR aims to fix these two modifiers .dnb-anchor--no-hover, and .dnb-anchor--no-style, to not have any hover effect/styling when hovering. This is the result after this PR:

Screen.Recording.2023-07-28.at.12.03.32.mov

I'm however not 100% sure how to best fix this, and what I've done now is just an alternative.
In our codebase:hover styling for anchor gets applied multiple places, in @mixin anchorStyle() in both anchor-mixins.scssand dnb-anchor-theme-ui.scss.

And to be able to get a correct look and behaviour for the anchor without hover, it's now dependent on much stuff to make it happen:

• The class.dnb-anchor--no-hover in anchor-mixins.scss which sets some CSS properties(background, not sure if this is needed?).
• &:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) { in anchor-mixins.scss.
• &:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) { in dnb-anchor-theme-ui.scss.

I thought about extending/adding more to the @mixin resetAnchorHoverStyle() instead, but I'm not confident that overriding all the styles that gets added to :hover in this mixin would lead to a better result 🤔
Hence I rather avoid adding :hover styles when .dnb-anchor--no-hover and .dnb-anchor--no-style.

I've also had to change the order of the selectors because of stylelint's no-descending-specificity.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 15, 2023 11:30am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3ecae36:

Sandbox	Source
eufemia-starter	Configuration

[snorrekim]

hover needs to be before active, if not, I think the active style will never actually work?

[snorrekim]

actually it wouldn't help in this case. The hover rule has higher specificity than the active rule because of the :not preudo-classes. So adding the :not rules on the hover ruins active. The only way would be to also increase the specificity of the :active rule. Something like:

&:active {
  &, &:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) {
      color: var(--color-mint-green);
      @include anchor-mixins.anchorBackground(var(--color-emerald-green));
    }
  }
}

&:hover:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) {
  color: var(--color-sea-green);
  @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
}

But honestly, increasing specificity keeps causing issues down the line. Especially with theming.

[snorrekim]

I guess we can also try a solution using css variables?

  &:not(.dnb-anchor--no-hover):not(.dnb-anchor--no-style) {
    --h-color: blue;
  }

  &:hover {
    color: var(--h-color);
  }

  &:active {
    color: red;
  }

but that really doesn't scale well.

[tujoworker]

I like the idea, and now that we can use runtime variables, we can do that. It eliminates specificity issues. But it at least needs an extensive rewrite.

What do you think about when you write that it does not scale well? Because of later complexity? Or because it will just solve some issues, but not other needs (and make them more complex)?

[tujoworker]

We may wait with this PR until PR-2521 is merged.

[snorrekim]

We may wait with this PR until PR-2521 is merged.

It's been merged

[langz]

I've gotten quite stuck on this, so what I did now was to first generate screenshot tests for classes dnb-anchor--no-hover and dnb-anchor--no-style in #2659, just to document existing behavior, before I'll hopefully continue in this PR to change the behavior to be correct.

Also changed the PR back to draft, as there's stuff that needs to be improved 👨‍💻
I'm not really sure what kind of approach to go for here.
My initial approach is to not add the :hover styling when class .dnb-anchor--no-hover is present.
The other approach I thought of was to remove/overwrite all :hover styling when .dnb-anchor--no-hover is present, but that feels even more dirty, as the CSS properties used for styling hover is different for themes, etc.

Whatever approach I've tried implementing, I always end up with multiple unexpected collisions with hover effects of different variants(contrast), and other themes...