Tabs focus issue (#517)

* feat: move dependencies to correct area * wat?! * fix: wat? * fix: t * fix esm export * fix remove
mondaycom · Feb 7, 2022 · b26676c · b26676c
1 parent 209799d
commit b26676c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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",