feat: rename SCSS mixin fakeFocus to focusRing (#2110)

BREAKING CHANGE: SCSS mixin was renamed from `fakeFocus` to `focusRing` as well as `removeFakeFocus` to `removeFocusRing`.
dnbexperience · May 31, 2023 · 47b5e47 · 47b5e47
1 parent b0649d5
commit 47b5e47
Show file tree

Hide file tree

Showing 23 changed files with 42 additions and 37 deletions.
diff --git a/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx b/...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -56,7 +56,7 @@
 
       border-radius: 0.5rem;
 
-      @include fakeFocus();
+      @include focusRing();
     }
   }
 

diff --git a/...ges/dnb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss b/...ges/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
@@ -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
@@ -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
@@ -12,15 +12,15 @@
   outline: none;
 
   &:focus {
-    @include fakeFocus('keyboard');
+    @include focusRing('keyboard');
   }
 }
 
 .dnb-mouse-focus {
   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
@@ -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
@@ -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
@@ -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));
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,7 +100,7 @@ @@
 % 85%
         );
-        @include fakeFocus();
+        @include focusRing();
       }
       /*
@@ Expand Down @@