feat(Anchor): remove horizontal padding (#2365)

* feat(Anchor): remove horizontal padding * update Anchor (UI) snapshots * update all other anchor related snapshots
dnbexperience · May 31, 2023 · f60e8bb · f60e8bb
1 parent aefca48
commit f60e8bb
Show file tree

Hide file tree

Showing 56 changed files with 11 additions and 7 deletions.
diff --git a/...ts__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-in-heading.snap.png b/...ts__/__image_snapshots__/anchor-for-ui-have-to-match-anchor-in-heading.snap.png
diff --git a/.../__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-left.snap.png b/.../__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-left.snap.png
diff --git a/.../__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-node.snap.png b/.../__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-node.snap.png
diff --git a/...__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-right.snap.png b/...__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-icon-right.snap.png
diff --git a/.../__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-paragraph.snap.png b/.../__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-paragraph.snap.png
diff --git a/..._/__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-skeleton.snap.png b/..._/__image_snapshots__/anchor-for-ui-have-to-match-anchor-with-skeleton.snap.png
diff --git a/...tests__/__image_snapshots__/anchor-for-ui-have-to-match-breaking-lines.snap.png b/...tests__/__image_snapshots__/anchor-for-ui-have-to-match-breaking-lines.snap.png
diff --git a/...sts__/__image_snapshots__/anchor-for-ui-have-to-match-the-active-state.snap.png b/...sts__/__image_snapshots__/anchor-for-ui-have-to-match-the-active-state.snap.png
diff --git a/...pshots__/anchor-for-ui-have-to-match-the-anchor-contrast-default-state.snap.png b/...pshots__/anchor-for-ui-have-to-match-the-anchor-contrast-default-state.snap.png
diff --git a/...napshots__/anchor-for-ui-have-to-match-the-anchor-contrast-focus-state.snap.png b/...napshots__/anchor-for-ui-have-to-match-the-anchor-contrast-focus-state.snap.png
diff --git a/...napshots__/anchor-for-ui-have-to-match-the-anchor-contrast-hover-state.snap.png b/...napshots__/anchor-for-ui-have-to-match-the-anchor-contrast-hover-state.snap.png
diff --git a/...ts__/__image_snapshots__/anchor-for-ui-have-to-match-the-default-state.snap.png b/...ts__/__image_snapshots__/anchor-for-ui-have-to-match-the-default-state.snap.png
diff --git a/...ge_snapshots__/anchor-for-ui-have-to-match-the-dnb-anchor-no-underline.snap.png b/...ge_snapshots__/anchor-for-ui-have-to-match-the-dnb-anchor-no-underline.snap.png
diff --git a/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-focus-state.snap.png b/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-focus-state.snap.png
diff --git a/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-hover-state.snap.png b/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-hover-state.snap.png
diff --git a/.../anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-legacy-icon.snap.png b/.../anchor-legacy-icon-usage-for-ui-have-to-match-anchor-with-legacy-icon.snap.png
diff --git a/...gacy-icon-usage-for-ui-have-to-match-anchor-with-paragraph-legacy-icon.snap.png b/...gacy-icon-usage-for-ui-have-to-match-anchor-with-paragraph-legacy-icon.snap.png
diff --git a/...y-icon-usage-for-ui-have-to-match-anchor-with-target-blank-legacy-icon.snap.png b/...y-icon-usage-for-ui-have-to-match-anchor-with-target-blank-legacy-icon.snap.png
diff --git a/...nchor-target-blank-for-ui-have-to-match-blank-target-anchor-in-heading.snap.png b/...nchor-target-blank-for-ui-have-to-match-blank-target-anchor-in-heading.snap.png
diff --git a/...hots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-state.snap.png b/...hots__/anchor-target-blank-for-ui-have-to-match-the-target-blank-state.snap.png
diff --git a/...anchor-target-blank-for-ui-have-to-match-the-target-blank-with-tooltip.snap.png b/...anchor-target-blank-for-ui-have-to-match-the-target-blank-with-tooltip.snap.png
diff --git a/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss b/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss
@@ -9,7 +9,7 @@
   // make sure we have always `display: inline;` as inline-block is breaking the border-bottom
   display: inline;
 
-  padding: 0.05575em 0.125em; // the total body height will then be 24px if font-size is 18px
+  padding: 0.05575em 0; // the total body height will then be 24px if font-size is 18px
 
   font-size: var(--font-size-basis);
   text-decoration: underline;
@@ -107,6 +107,11 @@
   border-radius: 0.25em;
 }
 
+@mixin anchorBackground($color) {
+  box-shadow: inset 100vw 100vw 0 0 $color, -0.125rem 0 0 0 $color,
+    0.125rem 0 0 0 $color;
+}
+
 // other styles
 @mixin useAnchorContrastStyle($contrastColor: var(--color-emerald-green)) {
   color: var(--color-white);
@@ -197,8 +202,7 @@
     }
   }
 
-  transition: background-color 200ms ease-in-out,
-    border-radius 200ms ease-in-out;
+  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out;
 
   [data-visual-test-wrapper] & {
     transition: none;

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
@@ -6,12 +6,12 @@
   &:hover,
   &:active {
     color: var(--color-sea-green);
-    background-color: var(--color-mint-green-50);
+    @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
   }
 
   &:active {
     color: var(--color-mint-green);
-    background-color: var(--color-emerald-green);
+    @include anchor-mixins.anchorBackground(var(--color-emerald-green));
   }
 
   &:focus {
@@ -23,12 +23,12 @@
 
 .dnb-anchor--hover {
   color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
+  @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
 }
 
 .dnb-anchor--active {
   color: var(--color-mint-green);
-  background-color: var(--color-emerald-green);
+  @include anchor-mixins.anchorBackground(var(--color-emerald-green));
 }
 
 .dnb-anchor--focus {

diff --git a/...snapshots__/autocomplete-have-to-match-autocomplete-with-search-result.snap.png b/...snapshots__/autocomplete-have-to-match-autocomplete-with-search-result.snap.png
diff --git a/...shots__/dropdown-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png b/...shots__/dropdown-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png
diff --git a/...ts__/dropdown-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png b/...ts__/dropdown-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png
diff --git a/..._/dropdown-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png b/..._/dropdown-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png
diff --git a/.../dropdown-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png b/.../dropdown-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png
diff --git a/.../__tests__/__image_snapshots__/formstatus-have-to-match-custom-content.snap.png b/.../__tests__/__image_snapshots__/formstatus-have-to-match-custom-content.snap.png
diff --git a/...snapshots__/globalstatus-have-to-match-the-close-button-in-focus-state.snap.png b/...snapshots__/globalstatus-have-to-match-the-close-button-in-focus-state.snap.png
diff --git a/...snapshots__/globalstatus-have-to-match-the-close-button-in-hover-state.snap.png b/...snapshots__/globalstatus-have-to-match-the-close-button-in-hover-state.snap.png
diff --git a/...ots__/globalstatus-have-to-match-the-default-state-with-custom-content.snap.png b/...ots__/globalstatus-have-to-match-the-default-state-with-custom-content.snap.png
diff --git a/...-format/__tests__/__image_snapshots__/numberformat-have-to-match-phone.snap.png b/...-format/__tests__/__image_snapshots__/numberformat-have-to-match-phone.snap.png
diff --git a/...s__/__image_snapshots__/numberformat-with-skeleton-have-to-match-phone.snap.png b/...s__/__image_snapshots__/numberformat-with-skeleton-have-to-match-phone.snap.png
diff --git a/...on/__tests__/__image_snapshots__/section-have-to-match-black-3-section.snap.png b/...on/__tests__/__image_snapshots__/section-have-to-match-black-3-section.snap.png
diff --git a/...on/__tests__/__image_snapshots__/section-have-to-match-default-section.snap.png b/...on/__tests__/__image_snapshots__/section-have-to-match-default-section.snap.png
diff --git a/...on/__tests__/__image_snapshots__/section-have-to-match-divider-section.snap.png b/...on/__tests__/__image_snapshots__/section-have-to-match-divider-section.snap.png
diff --git a/...ests__/__image_snapshots__/section-have-to-match-emerald-green-section.snap.png b/...ests__/__image_snapshots__/section-have-to-match-emerald-green-section.snap.png
diff --git a/...n/__tests__/__image_snapshots__/section-have-to-match-fire-red-section.snap.png b/...n/__tests__/__image_snapshots__/section-have-to-match-fire-red-section.snap.png
diff --git a/...n/__tests__/__image_snapshots__/section-have-to-match-lavender-section.snap.png b/...n/__tests__/__image_snapshots__/section-have-to-match-lavender-section.snap.png
diff --git a/...__tests__/__image_snapshots__/section-have-to-match-mint-green-section.snap.png b/...__tests__/__image_snapshots__/section-have-to-match-mint-green-section.snap.png
diff --git a/.../__tests__/__image_snapshots__/section-have-to-match-pistachio-section.snap.png b/.../__tests__/__image_snapshots__/section-have-to-match-pistachio-section.snap.png
diff --git a/..._tests__/__image_snapshots__/section-have-to-match-sand-yellow-section.snap.png b/..._tests__/__image_snapshots__/section-have-to-match-sand-yellow-section.snap.png
diff --git a/.../__tests__/__image_snapshots__/section-have-to-match-sea-green-section.snap.png b/.../__tests__/__image_snapshots__/section-have-to-match-sea-green-section.snap.png
diff --git a/...tion/__tests__/__image_snapshots__/section-have-to-match-white-section.snap.png b/...tion/__tests__/__image_snapshots__/section-have-to-match-white-section.snap.png
diff --git a/...ts/upload/__tests__/__image_snapshots__/upload-have-to-match-file-list.snap.png b/...ts/upload/__tests__/__image_snapshots__/upload-have-to-match-file-list.snap.png
diff --git a/...image_snapshots__/visuallyhidden-have-to-match-visuallyhidden-use-case.snap.png b/...image_snapshots__/visuallyhidden-have-to-match-visuallyhidden-use-case.snap.png
diff --git a/...pshots__/blockquote-for-ui-have-to-match-blockquote-with-no-background.snap.png b/...pshots__/blockquote-for-ui-have-to-match-blockquote-with-no-background.snap.png
diff --git a/...ui-have-to-match-blockquote-with-top-aligned-graphic-and-no-background.snap.png b/...ui-have-to-match-blockquote-with-top-aligned-graphic-and-no-background.snap.png
diff --git a/...__/blockquote-for-ui-have-to-match-blockquote-with-top-aligned-graphic.snap.png b/...__/blockquote-for-ui-have-to-match-blockquote-with-top-aligned-graphic.snap.png
diff --git a/...lements/lists/__tests__/__image_snapshots__/list-have-to-match-ul-list.snap.png b/...lements/lists/__tests__/__image_snapshots__/list-have-to-match-ul-list.snap.png
diff --git a/..._tests__/__image_snapshots__/lists-with-skeleton-have-to-match-ul-list.snap.png b/..._tests__/__image_snapshots__/lists-with-skeleton-have-to-match-ul-list.snap.png
diff --git a/...image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-example.snap.png b/...image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-example.snap.png
diff --git a/.../paragraph-for-ui-have-to-match-the-paragraph-with-additional-elements.snap.png b/.../paragraph-for-ui-have-to-match-the-paragraph-with-additional-elements.snap.png
diff --git a/...apshots__/paragraph-for-ui-have-to-match-the-paragraph-with-small-text.snap.png b/...apshots__/paragraph-for-ui-have-to-match-the-paragraph-with-small-text.snap.png
diff --git a/...s/__tests__/__image_snapshots__/helperclasses-have-to-match-core-style.snap.png b/...s/__tests__/__image_snapshots__/helperclasses-have-to-match-core-style.snap.png