style(Button): smaller tertiary button focus effect for Sbanken (#2319)

* style(Button): tertiary focus effect no longer outside button * Update screenshots * update screenshots * Fix table with sticky header screenshot test * chore(Button): remove null value css variable that might breaks screenshot tests * Check out from v10: Firefox Mac version of visually hidden snapshot * Update visual snapshots --------- Co-authored-by: Espen Liland <espen.liland@dnb.no> Co-authored-by: Joakim Bjerknes <joakbjerk@gmail.com> Co-authored-by: Tobias Høegh <tobias@tujo.no>
dnbexperience · May 12, 2023 · 0652d0d · 0652d0d
1 parent 126a748
commit 0652d0d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/...mage_snapshots__/button-for-sbanken-tertiary-have-to-match-focus-state.snap.png b/...mage_snapshots__/button-for-sbanken-tertiary-have-to-match-focus-state.snap.png
diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -903,6 +903,9 @@ exports[`Button scss have to match default theme snapshot 1`] = `
 * Button mixins
 *
 */
+.dnb-button--tertiary {
+  --button-tertiary-focus-overflow: -1rem;
+}
 .dnb-button--tertiary .dnb-button__text {
   position: relative;
 }
@@ -1044,7 +1047,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   cursor: not-allowed;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before {
-  right: -1rem;
+  right: var(--button-tertiary-focus-overflow);
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
   /* stylelint-disable */
@@ -1071,7 +1074,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   cursor: not-allowed;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before {
-  left: -1rem;
+  left: var(--button-tertiary-focus-overflow);
 }
 .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled] {
   cursor: not-allowed;

diff --git a/packages/dnb-eufemia/src/components/button/style/dnb-button--tertiary.scss b/packages/dnb-eufemia/src/components/button/style/dnb-button--tertiary.scss
@@ -3,6 +3,7 @@
 
 .dnb-button {
   &--tertiary {
+    --button-tertiary-focus-overflow: -1rem;
     // create underline (::after)
     .dnb-button__text {
       position: relative; // because of the underline
@@ -132,7 +133,7 @@
 
           @include focus() {
             &::before {
-              right: -1rem;
+              right: var(--button-tertiary-focus-overflow);
             }
           }
         }
@@ -166,7 +167,7 @@
 
           @include focus() {
             &::before {
-              left: -1rem;
+              left: var(--button-tertiary-focus-overflow);
             }
           }
         }

diff --git a/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss b/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss
@@ -65,22 +65,22 @@
 }
 
 // Used in tertiary button variant
-@mixin buttonFocusRing($whatinput: null) {
+@mixin buttonFocusRing($whatinput: null, $overflow: -0.5rem, $inset: null) {
   // Create focus-ring
   &::before {
     content: '';
     position: absolute;
     z-index: 1; // to be visible in other absolute contexts
 
     top: 0;
-    left: -0.5rem;
+    left: $overflow;
     bottom: 0;
-    right: -0.5rem;
+    right: $overflow;
 
     height: inherit;
     border-radius: inherit;
 
-    @include focusRing($whatinput);
+    @include focusRing($whatinput, null, $inset);
   }
 }
 

diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss
@@ -102,6 +102,8 @@
     $tertiary-padding: 0.5rem;
     $tertiary-padding-large: 1.5rem;
     $tertiary-icon-space: 0.5rem;
+
+    --button-tertiary-focus-overflow: 0;
 
     color: var(--sb-color-violet);
     background-color: transparent;
@@ -195,6 +197,10 @@
       }
     }
 
+    @include focus() {
+      @include buttonFocusRing(null, 0, inset);
+    }
+
     @include hover() {
       // underline
       .dnb-button__text::after {