From 47b5e47ab2ceeabef887d05ac48702cf46e749f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Fri, 17 Mar 2023 10:04:45 +0100
Subject: [PATCH] feat: rename SCSS mixin `fakeFocus` to `focusRing` (#2110)

BREAKING CHANGE:

SCSS mixin was renamed from `fakeFocus` to `focusRing` as well as `removeFakeFocus` to `removeFocusRing`.
---
 .../uilib/about-the-lib/releases/eufemia/v10-info.mdx     | 5 +++++
 .../src/docs/uilib/helpers/classes.mdx                    | 8 ++++----
 .../accordion/style/themes/dnb-accordion-theme-ui.scss    | 4 ++--
 .../src/components/button/style/dnb-button.scss           | 2 +-
 .../src/components/button/style/themes/button-mixins.scss | 6 +++---
 .../button/style/themes/dnb-button-theme-ui.scss          | 4 ++--
 .../src/components/checkbox/style/dnb-checkbox.scss       | 2 +-
 .../src/components/date-picker/style/dnb-date-picker.scss | 2 +-
 .../dnb-eufemia/src/components/radio/style/dnb-radio.scss | 2 +-
 .../section/style/themes/dnb-section-theme-ui.scss        | 2 +-
 .../components/skip-content/style/dnb-skip-content.scss   | 2 +-
 .../src/components/slider/style/dnb-slider.scss           | 2 +-
 .../src/components/switch/style/dnb-switch.scss           | 2 +-
 .../switch/style/themes/dnb-switch-theme-ui.scss          | 2 +-
 .../dnb-eufemia/src/components/tabs/style/dnb-tabs.scss   | 2 +-
 .../components/tabs/style/themes/dnb-tabs-theme-ui.scss   | 2 +-
 .../style/themes/dnb-toggle-button-theme-ui.scss          | 2 +-
 .../style/themes/dnb-drawer-list-theme-ui.scss            | 6 +++---
 .../src/fragments/scroll-view/style/dnb-scroll-view.scss  | 2 +-
 .../src/style/core/helper-classes/helper-classes.scss     | 4 ++--
 .../src/style/core/helper-classes/skip-link.scss          | 4 ++--
 packages/dnb-eufemia/src/style/core/utilities.scss        | 6 +++---
 .../dnb-eufemia/src/style/elements/anchor-mixins.scss     | 6 +++---
 23 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx
index 0da8f364f90..cc0517a733f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx
@@ -206,6 +206,11 @@ Stopped supporting Internet Explorer (IE), as Microsoft formally ended support f
 - Updated multiple types from `string | boolean` to `boolean`, as there was a lot of properties who should only support boolean values and not strings.
   Examples of changes to do would be to find Eufemia components using `"false"` or `"true"`, and replace it with boolean values. i.e., `vertical="false"` to `vertical={false}` or `selectall="true"` to `selectall={true}`.
 
+### SCSS
+
+Find the SCSS @mixin `fakeFocus` and replace it with `focusRing`.
+Find the SCSS @mixin `removeFakeFocus` and replace it with `removeFocusRing`.
+
 ### Deprecations
 
 - Helper class `.dnb-sr-only--inline` and SCSS mixin `srOnlyInline` was removed.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.mdx b/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.mdx
index c4a5d76e8bb..1402b2110b0 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.mdx
@@ -210,15 +210,15 @@ You can import Eufemia _mixins_ directly into your SCSS styles:
 @include defaultDropShadow();
 
 /** Eufemia Border helpers */
-@include fakeFocus(
+@include focusRing(
   /* $whatinput: 'keyboard', $color: var(--color-emerald-green), $inset: inset */
 );
+@include extendFocusRing(
+  /* $first-color: null, $second-color: null, width: 0.0625rem */
+);
 @include fakeBorder(
   /* $color: var(--color-emerald-green), $width: 0.0625rem, $inset: inset */
 );
-@include extendFakeFocus(
-  /* $first-color: null, $second-color: null, width: 0.0625rem */
-);
 
 /** Scroll behavior */
 @include scrollY(/* $mode: scroll */);
diff --git a/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss b/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss
index dad3a450134..3ad16374808 100644
--- a/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss
@@ -79,7 +79,7 @@
   }
   &__variant--outlined#{&}--expanded
     > &__header:not([disabled]):not(:active):not(:hover):focus {
-    @include fakeFocus(null, var(--color-emerald-green), inset);
+    @include focusRing(null, var(--color-emerald-green), inset);
   }
 
   &__variant--outlined#{&}--expanded
@@ -91,7 +91,7 @@
 
   // we have this hover variant, because of the default html focus/hover handling
   &__variant--outlined#{&}--expanded > &__header#{&}--hover:not(:active) {
-    @include hover () {
+    @include hover() {
       color: var(--color-white);
       background-color: var(--color-sea-green);
 
diff --git a/packages/dnb-eufemia/src/components/button/style/dnb-button.scss b/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
index f04a15e8807..b67b02df94a 100644
--- a/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
+++ b/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
@@ -254,7 +254,7 @@
 
     &:not([disabled]):focus,
     &:not([disabled]):active {
-      @include fakeFocus();
+      @include focusRing();
     }
 
     html[data-whatinput='mouse'] &:not([disabled]):focus,
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
index f38d2f38a32..e0366df2219 100644
--- a/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss
+++ b/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss
@@ -3,7 +3,7 @@
 *
 */
 @mixin buttonHoverStyle($color, $background-color, $border-color) {
-  // NB: to get "over" sibling, because of the extendFakeFocus
+  // NB: to get "over" sibling, because of the extendFocusRing
   // But if we would use it,
   // then then we have to take care of places we use position="absolute", like the Modal Close button
   // position: relative;
@@ -58,7 +58,7 @@
       background-color: $background-color;
     }
 
-    @include fakeFocus(null, $focus-color, inset);
+    @include focusRing(null, $focus-color, inset);
 
     @content;
   }
@@ -80,7 +80,7 @@
     height: inherit;
     border-radius: inherit;
 
-    @include fakeFocus($whatinput);
+    @include focusRing($whatinput);
   }
 }
 
diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss
index 353d8214f7d..64b4498a52a 100644
--- a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss
@@ -124,7 +124,7 @@
     }
 
     @include focus() {
-      @include removeFakeFocus();
+      @include removeFocusRing();
       @include buttonFocusRing();
 
       // underline
@@ -142,7 +142,7 @@
     }
 
     @include active() {
-      @include removeFakeFocus();
+      @include removeFocusRing();
 
       // underline
       .dnb-button__text::after {
diff --git a/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss b/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss
index 8caee7c7b8c..15c75c4c8ea 100644
--- a/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss
+++ b/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss
@@ -53,7 +53,7 @@
   &__focus {
     display: none;
 
-    @include fakeFocus();
+    @include focusRing();
   }
 
   &__focus,
diff --git a/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss b/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss
index f4983df4a86..293bfa7df8d 100644
--- a/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss
+++ b/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss
@@ -313,7 +313,7 @@
     margin: 0;
 
     &.dnb-no-focus:focus {
-      @include fakeFocus();
+      @include focusRing();
     }
   }
 
diff --git a/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss b/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
index ee294609ae6..2f73f4472c9 100644
--- a/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
+++ b/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
@@ -53,7 +53,7 @@
   &__focus {
     display: none;
 
-    @include fakeFocus();
+    @include focusRing();
   }
 
   &__focus,
diff --git a/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss b/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss
index 338f61c16c2..ab58e4748b0 100644
--- a/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss
@@ -140,7 +140,7 @@
       color: var(--color-white);
 
       &::before {
-        @include fakeFocus(null, var(--color-white));
+        @include focusRing(null, var(--color-white));
       }
     }
   }
diff --git a/packages/dnb-eufemia/src/components/skip-content/style/dnb-skip-content.scss b/packages/dnb-eufemia/src/components/skip-content/style/dnb-skip-content.scss
index 236c464b8de..d00cc3b2f86 100644
--- a/packages/dnb-eufemia/src/components/skip-content/style/dnb-skip-content.scss
+++ b/packages/dnb-eufemia/src/components/skip-content/style/dnb-skip-content.scss
@@ -22,7 +22,7 @@
       position: absolute;
       inset: #{var(--focus-ring-width)};
 
-      @include fakeFocus();
+      @include focusRing();
     }
   }
 
diff --git a/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss b/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss
index a92019bd66d..4c4241b4136 100644
--- a/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss
+++ b/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss
@@ -220,7 +220,7 @@
   }
 
   &__button-helper:not(:disabled):focus ~ .dnb-button {
-    @include fakeFocus();
+    @include focusRing();
   }
 
   > .dnb-form-label {
diff --git a/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss b/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss
index b2c396bebd6..07c6ffe9e36 100644
--- a/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss
+++ b/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss
@@ -100,7 +100,7 @@
       50% 85%
     );
 
-    @include fakeFocus();
+    @include focusRing();
   }
 
   /*
diff --git a/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss b/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss
index 7fa4d08fac5..2d20c985449 100644
--- a/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss
@@ -117,7 +117,7 @@
   }
   &__input:not([disabled]):focus ~ &__background,
   &__input:not([disabled]):active ~ &__background {
-    @include fakeFocus();
+    @include focusRing();
   }
   &__input:not([disabled]):focus ~ &__button &__focus,
   &__input:not([disabled]):active ~ &__button &__focus {
diff --git a/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss b/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss
index e024c52d2f7..89770d04ae5 100644
--- a/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss
+++ b/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss
@@ -23,7 +23,7 @@
       flex: 0 1 auto;
 
       &:focus {
-        @include fakeFocus();
+        @include focusRing();
       }
 
       @include scrollX(auto);
diff --git a/packages/dnb-eufemia/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-eufemia/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
index 983b68429da..ad3cec93c7a 100644
--- a/packages/dnb-eufemia/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
@@ -56,7 +56,7 @@
 
       border-radius: 0.5rem;
 
-      @include fakeFocus();
+      @include focusRing();
     }
   }
 
diff --git a/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss b/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss
index 7526747e665..76bb909cb8d 100644
--- a/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss
@@ -103,7 +103,7 @@
     }
     html[data-whatinput='keyboard']
       &:not([disabled]):not(:active):not(:hover):focus {
-      @include fakeFocus(null, var(--color-emerald-green), inset);
+      @include focusRing(null, var(--color-emerald-green), inset);
     }
   }
 
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss
index cfb6a8b1c24..322f5a57268 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss
@@ -28,11 +28,11 @@
     );
 
     &:focus {
-      @include fakeFocus();
+      @include focusRing();
     }
 
     &--focusring {
-      @include fakeFocus('mouse');
+      @include focusRing('mouse');
     }
   }
 
@@ -206,7 +206,7 @@
 
     &--selected &__item {
       .dnb-anchor:focus {
-        @include fakeFocus(null, var(--color-white));
+        @include focusRing(null, var(--color-white));
       }
     }
   }
diff --git a/packages/dnb-eufemia/src/fragments/scroll-view/style/dnb-scroll-view.scss b/packages/dnb-eufemia/src/fragments/scroll-view/style/dnb-scroll-view.scss
index 70145e701e3..cf23ff17885 100644
--- a/packages/dnb-eufemia/src/fragments/scroll-view/style/dnb-scroll-view.scss
+++ b/packages/dnb-eufemia/src/fragments/scroll-view/style/dnb-scroll-view.scss
@@ -18,7 +18,7 @@
     &:focus {
       outline: none;
 
-      @include fakeFocus();
+      @include focusRing();
     }
   }
 }
diff --git a/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss b/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss
index 702955b1e84..fda1b6b3818 100644
--- a/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss
+++ b/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss
@@ -12,7 +12,7 @@
   outline: none;
 
   &:focus {
-    @include fakeFocus('keyboard');
+    @include focusRing('keyboard');
   }
 }
 
@@ -20,7 +20,7 @@
   outline: none;
 
   &:focus {
-    @include fakeFocus('mouse');
+    @include focusRing('mouse');
   }
 }
 
diff --git a/packages/dnb-eufemia/src/style/core/helper-classes/skip-link.scss b/packages/dnb-eufemia/src/style/core/helper-classes/skip-link.scss
index 1c8526aa611..f3bd2c82fef 100644
--- a/packages/dnb-eufemia/src/style/core/helper-classes/skip-link.scss
+++ b/packages/dnb-eufemia/src/style/core/helper-classes/skip-link.scss
@@ -53,7 +53,7 @@
 
     background-color: var(--color-white);
 
-    @include fakeFocus('mouse');
+    @include focusRing('mouse');
   }
 
   &:hover::before {
@@ -65,7 +65,7 @@
 
   // focus
   &:focus:not(:active)::before {
-    @include fakeFocus();
+    @include focusRing();
   }
 
   // focus
diff --git a/packages/dnb-eufemia/src/style/core/utilities.scss b/packages/dnb-eufemia/src/style/core/utilities.scss
index bfff02c4d5e..9fb05761c2e 100644
--- a/packages/dnb-eufemia/src/style/core/utilities.scss
+++ b/packages/dnb-eufemia/src/style/core/utilities.scss
@@ -55,7 +55,7 @@
   }
 }
 
-@mixin fakeFocus($whatinput: null, $color: null, $inset: null) {
+@mixin focusRing($whatinput: null, $color: null, $inset: null) {
   outline: none;
 
   @if $whatinput == null {
@@ -69,7 +69,7 @@
     @include fakeBorder($color, var(--focus-ring-width), $inset);
   }
 }
-@mixin removeFakeFocus($whatinput: null) {
+@mixin removeFocusRing($whatinput: null) {
   outline: initial;
   @if $whatinput == null {
     $whatinput: 'keyboard';
@@ -122,7 +122,7 @@
   }
 }
 
-@mixin extendFakeFocus(
+@mixin extendFocusRing(
   $first-color: null,
   $second-color: null,
   $width: 0.0625rem /*1px*/
diff --git a/packages/dnb-eufemia/src/style/elements/anchor-mixins.scss b/packages/dnb-eufemia/src/style/elements/anchor-mixins.scss
index 7e4b9e9f9c1..e457f025654 100644
--- a/packages/dnb-eufemia/src/style/elements/anchor-mixins.scss
+++ b/packages/dnb-eufemia/src/style/elements/anchor-mixins.scss
@@ -111,9 +111,9 @@
   }
 
   @if $whatinput {
-    @include fakeFocus($whatinput);
+    @include focusRing($whatinput);
   } @else {
-    @include fakeFocus();
+    @include focusRing();
   }
   border-radius: 0.25em;
 }
@@ -138,7 +138,7 @@
     color: var(--color-white);
     background-color: transparent;
 
-    @include fakeFocus(null, var(--color-white));
+    @include focusRing(null, var(--color-white));
   }
 }