fix(Anchor): use text-decoration instead of box-shadow for chromium breaking underline support

packages/dnb-design-system-portal/src/docs/uilib/elements/anchor.md

@@ -111,6 +111,16 @@ To force a specific state of style, use the following classes to do so:
       I'm a Button!
     </button>
   </li>
+  <li>
+    <Anchor href="/uilib/elements/anchor" data-visual-test="anchor-newline">
+      Newline <br /> Newline
+    </Anchor>
+  </li>
+  <li>
+    <Anchor skeleton href="/uilib/elements/anchor" data-visual-test="anchor-skeleton">
+      Skeleton
+    </Anchor>
+  </li>
 </ul>
 `}
 </ComponentBox>

packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js

@@ -106,7 +106,7 @@ describe('Autocomplete screenshot', () => {
         '[data-visual-test="autocomplete-suffix"] .dnb-autocomplete .dnb-input',
       simulate: 'click',
       style: {
-        height: '35rem',
+        height: '31rem',
       },
     })
     expect(screenshot).toMatchImageSnapshot()

packages/dnb-eufemia/src/components/global-status/__tests__/GlobalStatus.screenshot.test.js

@@ -8,8 +8,9 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
+const style = { width: '25rem' }
+
 describe('GlobalStatus screenshot', () => {
-  const style = { width: '20rem' }
   setupPageScreenshot({ url: '/uilib/components/global-status/demos' })
 
   it('have to match the default state with custom content', async () => {
@@ -20,6 +21,15 @@ describe('GlobalStatus screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match the info state and custom content', async () => {
+    const screenshot = await testPageScreenshot({
+      style,
+      selector:
+        '[data-visual-test="global-status-info"] .dnb-global-status',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match the close button in focus state', async () => {
     const screenshot = await testPageScreenshot({
       style,
@@ -41,19 +51,4 @@ describe('GlobalStatus screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
-
-  it('have to match the info state and custom content', async () => {
-    const screenshot = await testPageScreenshot({
-      style,
-      selector:
-        '[data-visual-test="global-status-info"] .dnb-global-status',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-  // it.skip('have to match custom content', async () => {
-  //   const screenshot = await testPageScreenshot({
-  //     selector: '[data-visual-test="global-status-custom"]'
-  //   })
-  //   expect(screenshot).toMatchImageSnapshot()
-  // })
 })

packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap

@@ -98,16 +98,15 @@ exports[`Section scss have to match default theme snapshot 1`] = `
 .dnb-section--fire-red .dnb-anchor,
 .dnb-section--emerald-green .dnb-anchor,
 .dnb-section--sea-green .dnb-anchor {
-  color: var(--color-white);
-  box-shadow: 0 0.09375rem 0 0 var(--color-white); }
+  color: var(--color-white); }
   .dnb-section--fire-red .dnb-anchor:hover, .dnb-section--fire-red .dnb-anchor:active,
   .dnb-section--emerald-green .dnb-anchor:hover,
   .dnb-section--emerald-green .dnb-anchor:active,
   .dnb-section--sea-green .dnb-anchor:hover,
   .dnb-section--sea-green .dnb-anchor:active {
     color: var(--color-emerald-green);
     background-color: var(--color-white);
-    box-shadow: none; }
+    text-decoration: none; }
   .dnb-section--fire-red .dnb-anchor:active,
   .dnb-section--emerald-green .dnb-anchor:active,
   .dnb-section--sea-green .dnb-anchor:active {

packages/dnb-eufemia/src/elements/__tests__/Anchor.screenshot.test.js

@@ -13,14 +13,28 @@ describe('Anchor screenshot', () => {
   setupPageScreenshot({
     url: '/uilib/elements/anchor',
   })
-  // the first one is on 5.54%
+
   it('have to match the "default" state', async () => {
     const screenshot = await testPageScreenshot({
       selector: '[data-visual-test="anchor-default"]',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match breaking lines', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="anchor-newline"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match anchor with skeleton', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="anchor-skeleton"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match anchor with icon', async () => {
     const screenshot = await testPageScreenshot({
       selector: '[data-visual-test="anchor-icon"]',

packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap

@@ -35,11 +35,13 @@ button.dnb-anchor {
   display: inline;
   padding: 0.05575em 0.125em 0.05575em;
   font-size: var(--font-size-basis);
-  text-decoration: none;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 0.0938rem;
+  text-underline-offset: 0.25em;
   border-radius: 0;
-  box-shadow: 0 0.09375rem 0 0 currentColor;
   color: var(--color-sea-green);
-  transition: background-color 200ms ease-in-out, box-shadow 180ms ease-in-out, border-radius 200ms ease-in-out; }
+  transition: background-color 200ms ease-in-out, border-radius 200ms ease-in-out; }
   sup .dnb-anchor,
   sub .dnb-anchor {
     padding: 0 0.025em 0; }
@@ -62,7 +64,6 @@ button.dnb-anchor {
       transition: none; }
       .dnb-anchor:focus:not(:active),
       .dnb-section .dnb-anchor:focus:not(:active).dnb-anchor {
-        box-shadow: none;
         text-decoration: none; }
     html[data-whatinput='keyboard'] .dnb-anchor:focus {
       --border-color: var(--color-emerald-green);
@@ -78,15 +79,13 @@ button.dnb-anchor {
     .dnb-anchor:hover,
     .dnb-section .dnb-anchor:hover.dnb-anchor, .dnb-anchor:active,
     .dnb-section .dnb-anchor:active.dnb-anchor {
-      box-shadow: none;
       text-decoration: none; }
   .dnb-anchor:active {
     color: var(--color-mint-green);
     background-color: var(--color-emerald-green);
     border-radius: 0.25em; }
     .dnb-anchor:active,
     .dnb-section .dnb-anchor:active.dnb-anchor {
-      box-shadow: none;
       text-decoration: none; }
   .dnb-anchor[target='_blank']:not(:empty):not(.dnb-anchor--no-icon) {
     position: relative;
@@ -121,7 +120,6 @@ button.dnb-anchor {
   border-radius: 0.25em; }
   .dnb-anchor--hover,
   .dnb-section .dnb-anchor--hover.dnb-anchor {
-    box-shadow: none;
     text-decoration: none; }
 
 .dnb-anchor--active {
@@ -130,7 +128,6 @@ button.dnb-anchor {
   border-radius: 0.25em; }
   .dnb-anchor--active,
   .dnb-section .dnb-anchor--active.dnb-anchor {
-    box-shadow: none;
     text-decoration: none; }
 
 .dnb-anchor--focus {
@@ -142,7 +139,6 @@ button.dnb-anchor {
     transition: none; }
     .dnb-anchor--focus:not(:active),
     .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor {
-      box-shadow: none;
       text-decoration: none; }
   html[data-whatinput='mouse'] .dnb-anchor--focus {
     --border-color: var(--color-emerald-green);
@@ -157,15 +153,13 @@ button.dnb-anchor {
   transition: none; }
   .dnb-anchor--no-style,
   .dnb-section .dnb-anchor--no-style.dnb-anchor {
-    box-shadow: none;
     text-decoration: none; }
   .dnb-anchor--no-style:hover {
     color: inherit;
     background-color: transparent; }
 
 .dnb-anchor--no-underline,
 .dnb-section .dnb-anchor--no-underline.dnb-anchor {
-  box-shadow: none;
   text-decoration: none; }
 
 .dnb-anchor--no-hover:hover {
@@ -179,12 +173,11 @@ button.dnb-anchor {
   transition: none; }
 
 .dnb-anchor--contrast {
-  color: var(--color-white);
-  box-shadow: 0 0.09375rem 0 0 var(--color-white); }
+  color: var(--color-white); }
   .dnb-anchor--contrast:hover, .dnb-anchor--contrast:active {
     color: var(--color-emerald-green);
     background-color: var(--color-white);
-    box-shadow: none; }
+    text-decoration: none; }
   .dnb-anchor--contrast:active {
     color: var(--color-emerald-green);
     background-color: var(--color-white); }
@@ -205,7 +198,7 @@ a.dnb-button {
 
 .dnb-skeleton > .dnb-anchor,
 .dnb-anchor.dnb-skeleton {
-  box-shadow: none; }
+  text-decoration: none; }
   .dnb-skeleton > .dnb-anchor::after,
   .dnb-anchor.dnb-skeleton::after {
     filter: grayscale(100%) opacity(0.3); }
@@ -557,14 +550,13 @@ sub {
     font-size: inherit; }
   .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor,
   .dnb-blockquote:not(.dnb-blockquote--no-background) a {
-    color: var(--color-white);
-    box-shadow: 0 0.09375rem 0 0 var(--color-white); }
+    color: var(--color-white); }
     .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:hover, .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:active,
     .dnb-blockquote:not(.dnb-blockquote--no-background) a:hover,
     .dnb-blockquote:not(.dnb-blockquote--no-background) a:active {
       color: var(--color-emerald-green);
       background-color: var(--color-white);
-      box-shadow: none; }
+      text-decoration: none; }
     .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:active,
     .dnb-blockquote:not(.dnb-blockquote--no-background) a:active {
       color: var(--color-emerald-green);

packages/dnb-eufemia/src/style/elements/_anchor-mixins.scss

@@ -5,19 +5,18 @@
 
 @import '../core/utilities.scss';
 
-$anchorBorderBottomWidth: 0.09375rem; // we can use 1.5px incase we use box-shadow instead of border-bottom
-$anchorBorderRadius: 0.25em;
-
 @mixin anchorDefaultStyle($theme: null) {
   // make sure we have always `display: inline;` as inline-block is breaking the border-bottom
   display: inline;
 
   padding: 0.05575em 0.125em 0.05575em; // the total body height will then be 24px if font-size is 18px
 
   font-size: var(--font-size-basis);
-  text-decoration: none;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 0.0938rem;
+  text-underline-offset: 0.25em;
   border-radius: 0;
-  box-shadow: 0 $anchorBorderBottomWidth 0 0 currentColor;
 
   color: var(--color-sea-green);
 
@@ -51,9 +50,6 @@ $anchorBorderRadius: 0.25em;
 @mixin resetUnderlineStyle() {
   &,
   .dnb-section &.dnb-anchor {
-    box-shadow: none;
-
-    // legacy reset
     text-decoration: none;
   }
 }
@@ -80,7 +76,7 @@ $anchorBorderRadius: 0.25em;
 @mixin anchorHoverStyle() {
   color: var(--color-sea-green);
   background-color: var(--color-mint-green-50);
-  border-radius: $anchorBorderRadius;
+  border-radius: 0.25em;
   @include resetUnderlineStyle();
   @if mixin-exists('anchorHoverStyleCustomisation') {
     @include anchorHoverStyleCustomisation();
@@ -89,7 +85,7 @@ $anchorBorderRadius: 0.25em;
 @mixin anchorActiveStyle() {
   color: var(--color-mint-green);
   background-color: var(--color-emerald-green);
-  border-radius: $anchorBorderRadius;
+  border-radius: 0.25em;
   @include resetUnderlineStyle();
   @if mixin-exists('anchorActiveStyleCustomisation') {
     @include anchorActiveStyleCustomisation();
@@ -107,19 +103,18 @@ $anchorBorderRadius: 0.25em;
   } @else {
     @include fakeFocus();
   }
-  border-radius: $anchorBorderRadius;
+  border-radius: 0.25em;
 }
 
 // other styles
 @mixin useAnchorContrastStyle($contrastColor: var(--color-emerald-green)) {
   color: var(--color-white);
-  box-shadow: 0 $anchorBorderBottomWidth 0 0 var(--color-white);
 
   &:hover,
   &:active {
     color: $contrastColor;
     background-color: var(--color-white);
-    box-shadow: none;
+    text-decoration: none;
   }
   &:active {
     color: $contrastColor;
@@ -193,7 +188,7 @@ $anchorBorderRadius: 0.25em;
   }
 
   transition: background-color 200ms ease-in-out,
-    box-shadow 180ms ease-in-out, border-radius 200ms ease-in-out;
+    border-radius 200ms ease-in-out;
   [data-visual-test-wrapper] & {
     transition: none;
   }

packages/dnb-eufemia/src/style/elements/anchor.scss

@@ -73,7 +73,7 @@ a.dnb-button {
 // because of the underline, we hide anchors
 .dnb-skeleton > .dnb-anchor,
 .dnb-anchor.dnb-skeleton {
-  box-shadow: none;
+  text-decoration: none;
   &::after {
     filter: grayscale(100%) opacity(0.3);
   }