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

dnbexperience · Jul 28, 2023 · 715f800 · 715f800
1 parent 215e52c
commit 715f800
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 12 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx
@@ -47,7 +47,7 @@ To force a specific state of style, use the following classes to do so:
 
 ### Anchor with icons
 
-Icons can be adde with the `icon` and `iconPosition` props. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).
+Icons can be added with the `icon` and `iconPosition` props. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).
 
 <AnchorExampleIcons />
 

diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap b/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap
@@ -270,10 +270,10 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-anchor:hover, .dnb-anchor:active {
+.dnb-anchor:hover :not(.dnb-anchor--no-hover), .dnb-anchor:active :not(.dnb-anchor--no-hover) {
   border-radius: 0.25em;
 }
-.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor, .dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor {
+.dnb-anchor:hover :not(.dnb-anchor--no-hover), .dnb-section .dnb-anchor:hover :not(.dnb-anchor--no-hover).dnb-anchor, .dnb-anchor:active :not(.dnb-anchor--no-hover), .dnb-section .dnb-anchor:active :not(.dnb-anchor--no-hover).dnb-anchor {
   text-decoration: none;
 }
 .dnb-anchor:active {
@@ -353,7 +353,6 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   text-decoration: none;
 }
 .dnb-anchor--no-style:hover {
-  color: inherit;
   background-color: transparent;
 }
 
@@ -362,7 +361,6 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 }
 
 .dnb-anchor--no-hover:hover {
-  color: inherit;
   background-color: transparent;
 }
 
@@ -543,7 +541,7 @@ exports[`Anchor scss has to match theme css for ui 1`] = `
 .dnb-anchor {
   color: var(--color-sea-green);
 }
-.dnb-anchor:hover, .dnb-anchor:active {
+.dnb-anchor:hover :not(.dnb-anchor--no-hover), .dnb-anchor:active :not(.dnb-anchor--no-hover) {
   color: var(--color-sea-green);
   box-shadow: inset 100vw 100vw 0 0 var(--color-mint-green-50), -0.125em 0 0 0 var(--color-mint-green-50), 0.125em 0 0 0 var(--color-mint-green-50);
 }

diff --git a/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss b/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss
@@ -59,8 +59,6 @@
 
 @mixin resetAnchorHoverStyle() {
   &:hover {
-    color: inherit;
-
     // in case we don't want to change the color to the body color
     background-color: transparent;
   }
@@ -187,7 +185,9 @@
 
   &:hover,
   &:active {
-    @include anchorHoverStyle();
+    :not(.dnb-anchor--no-hover) {
+      @include anchorHoverStyle();
+    }
   }
 
   &:active {
@@ -207,7 +207,6 @@
   [data-visual-test-wrapper] & {
     transition: none;
   }
-
   // other stuff, not related to the Anchor directly
   .dnb-icon {
     display: inline-block;

diff --git a/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss b/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss
@@ -5,8 +5,10 @@
 
   &:hover,
   &:active {
-    color: var(--color-sea-green);
-    @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
+    :not(.dnb-anchor--no-hover) {
+      color: var(--color-sea-green);
+      @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
+    }
   }
 
   &:active {