From b26676cc5a90ccda58ab2d6c9f5d16902613fc5d Mon Sep 17 00:00:00 2001
From: Orr Gottlieb <60314759+orrgottlieb@users.noreply.github.com>
Date: Mon, 7 Feb 2022 11:22:33 +0200
Subject: [PATCH] Tabs focus issue (#517)

* feat: move dependencies to correct area

* wat?!

* fix: wat?

* fix: t

* fix esm export

* fix remove
---
 src/components/Tabs/Tab/Tab.jsx               |  8 +++--
 src/components/Tabs/Tab/Tab.scss              | 34 ++-----------------
 .../tab-snapshot-tests.jest.js.snap           |  4 +--
 src/styles/states.scss                        | 12 +++----
 webpack/published-components.js               |  2 ++
 5 files changed, 19 insertions(+), 41 deletions(-)

diff --git a/src/components/Tabs/Tab/Tab.jsx b/src/components/Tabs/Tab/Tab.jsx
index e098605cbd..98711bea6b 100644
--- a/src/components/Tabs/Tab/Tab.jsx
+++ b/src/components/Tabs/Tab/Tab.jsx
@@ -33,12 +33,16 @@ const Tab = forwardRef(
 
       return [...children, iconElement];
     }
-
     return (
       <li
         ref={mergedRef}
         key={id}
-        className={cx("tab--wrapper", className, { active, disabled, "focus-visible": focus })}
+        className={cx("tab--wrapper", className, {
+          active,
+          disabled,
+          "focus-visible": focus,
+          "tab-focus-visible-inset": focus
+        })}
         id={id}
         role="tab"
         aria-selected={active}
diff --git a/src/components/Tabs/Tab/Tab.scss b/src/components/Tabs/Tab/Tab.scss
index 4a269565a6..d22656fcbb 100644
--- a/src/components/Tabs/Tab/Tab.scss
+++ b/src/components/Tabs/Tab/Tab.scss
@@ -1,3 +1,4 @@
+@import "../../../styles/states";
 @import "../../../styles/themes";
 @import "../../../styles/typography";
 
@@ -55,38 +56,9 @@
     }
   }
 
-  &.focus-visible {
+  &.tab-focus-visible-inset {
+    @include focus-style-inset(3px, 3px);
     position: relative;
-
-    :after {
-      content: "";
-      position: absolute;
-      left: -1px;
-      right: -1px;
-      top: -1px;
-      bottom: -3px;
-      border: 1px solid;
-      @include theme-prop(border-color, primary-color);
-      box-sizing: border-box;
-      border-radius: 1px;
-      padding-left: 0;
-      padding-right: 0;
-      z-index: 1;
-    }
-
-    :before {
-      content: "";
-      position: absolute;
-      top: -4px;
-      left: -4px;
-      right: -4px;
-      bottom: -6px;
-      opacity: 0.4;
-      border: 3px solid;
-      @include theme-prop(border-color, primary-color);
-      border-radius: 4px;
-      z-index: 1;
-    }
   }
 
   &.active {
diff --git a/src/components/Tabs/Tab/__tests__/__snapshots__/tab-snapshot-tests.jest.js.snap b/src/components/Tabs/Tab/__tests__/__snapshots__/tab-snapshot-tests.jest.js.snap
index 796a0760e3..485fd98428 100644
--- a/src/components/Tabs/Tab/__tests__/__snapshots__/tab-snapshot-tests.jest.js.snap
+++ b/src/components/Tabs/Tab/__tests__/__snapshots__/tab-snapshot-tests.jest.js.snap
@@ -34,7 +34,7 @@ exports[`Tab renders correctly when focus 1`] = `
 <li
   aria-disabled={false}
   aria-selected={false}
-  className="tab--wrapper focus-visible"
+  className="tab--wrapper focus-visible tab-focus-visible-inset"
   id=""
   role="tab"
 >
@@ -49,7 +49,7 @@ exports[`Tab renders correctly when focus and active 1`] = `
 <li
   aria-disabled={false}
   aria-selected={true}
-  className="tab--wrapper active focus-visible"
+  className="tab--wrapper active focus-visible tab-focus-visible-inset"
   id=""
   role="tab"
 >
diff --git a/src/styles/states.scss b/src/styles/states.scss
index a27b02d8ec..fa0d608ec7 100644
--- a/src/styles/states.scss
+++ b/src/styles/states.scss
@@ -47,10 +47,10 @@
   }
 }
 
-@mixin focus-style-inset($focus-radius: 4px) {
+@mixin focus-style-inset($focus-radius: 4px, $shadow-depth: 3px) {
   &:focus-visible,
   &.focus-visible {
-    @include focus-style-css-inset($focus-radius);
+    @include focus-style-css-inset($focus-radius, $shadow-depth);
   }
 
   &:focus:not(.focus-visible) {
@@ -75,16 +75,16 @@
   border-radius: $focus-radius;
 }
 
-@mixin focus-style-css($focus-radius: 4px) {
+@mixin focus-style-css($focus-radius: 4px, $shadow-depth: 3px) {
   @include focus-style-base($focus-radius);
 
-  box-shadow: 0 0 0 3px hsl(209deg 100% 50% / 50%), 0 0 0 1px var(--primary-hover-color) inset;
+  box-shadow: 0 0 0 $shadow-depth hsl(209deg 100% 50% / 50%), 0 0 0 1px var(--primary-hover-color) inset;
 }
 
-@mixin focus-style-css-inset($focus-radius: 4px) {
+@mixin focus-style-css-inset($focus-radius: 4px, $shadow-depth: 3px) {
   @include focus-style-base($focus-radius);
 
-  box-shadow: 0 0 0 3px hsl(209deg 100% 50% / 50%) inset, 0 0 0 1px var(--primary-hover-color) inset;
+  box-shadow: 0 0 0 $shadow-depth hsl(209deg 100% 50% / 50%) inset, 0 0 0 1px var(--primary-hover-color) inset;
 }
 
 @mixin focus-style-css-on-primary($focus-radius: 4px) {
diff --git a/webpack/published-components.js b/webpack/published-components.js
index afeb2de8ba..f8952a4330 100644
--- a/webpack/published-components.js
+++ b/webpack/published-components.js
@@ -67,6 +67,7 @@ const publishedComponents = {
   Button: "components/Button/Button.jsx",
   Loader: "components/Loader/Loader.jsx",
   Icon: "components/Icon/Icon.jsx",
+  Flex: "components/Flex/Flex.jsx",
   CustomSvgIcon: "components/Icon/CustomSvgIcon.jsx",
   FormattedNumber: "components/FormattedNumber/FormattedNumber.jsx",
   LinearProgressBar: "components/ProgressBars/LinearProgressBar/LinearProgressBar.jsx",
@@ -82,6 +83,7 @@ const publishedComponents = {
   Skeleton: "components/Skeleton/Skeleton.jsx",
   Avatar: "components/Avatar/Avatar.jsx",
   IconButton: "components/IconButton/IconButton.jsx",
+  Slider: "components/Slider/Slider.jsx",
   // hooks
   useKeyEvent: "hooks/useKeyEvent/index.js",
   useEventListener: "hooks/useEventListener/index.js",