fix: extra arrow in tab component on resize (#16652)

* fix: extra arrow in tab component on resize * fix: firefox support * fix: left arrow was not visible * fix: previous arrow in contained story --------- Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Jun 11, 2024 · 7e57d8e · 7e57d8e
1 parent cd57b29
commit 7e57d8e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
@@ -438,9 +438,10 @@ function TabList({
   });
 
   useEffect(() => {
+    //adding 1 in calculation for firefox support
     setIsNextButtonVisible(
       ref.current
-        ? scrollLeft + buttonWidth + ref.current.clientWidth <
+        ? scrollLeft + buttonWidth + ref.current.clientWidth + 1 <
             ref.current.scrollWidth
         : false
     );
@@ -450,7 +451,7 @@ function TabList({
         setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
       }
     }
-  }, [scrollLeft, children, dismissable]);
+  }, [scrollLeft, children, dismissable, isScrollable]);
 
   useEffectOnce(() => {
     if (tabs.current[selectedIndex]?.disabled) {
@@ -467,12 +468,14 @@ function TabList({
 
   useIsomorphicEffect(() => {
     if (ref.current) {
-      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+      //adding 1 in calculation for firefox support
+      setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
     }
 
     function handler() {
       if (ref.current) {
-        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+        //adding 1 in calculation for firefox support
+        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
       }
     }
 

diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
@@ -112,6 +112,7 @@
     }
 
     .#{$prefix}--tab--overflow-nav-button svg {
+      z-index: 2;
       fill: $icon-primary;
     }
 
@@ -155,16 +156,16 @@
     .#{$prefix}--tab--overflow-nav-button--previous::before {
       position: absolute;
       z-index: 1;
-      background: linear-gradient(to left, rgba(255, 255, 255, 0), $background);
+      background: $background;
       block-size: 100%;
       content: '';
-      inline-size: $spacing-03;
-      inset-inline-end: -$spacing-03;
+      inline-size: $spacing-08;
+      inset-inline-end: 0;
     }
 
     &.#{$prefix}--tabs--contained
       .#{$prefix}--tab--overflow-nav-button--previous::before {
-      background-image: linear-gradient(
+      background: linear-gradient(
         to left,
         rgba(255, 255, 255, 0),
         $layer-accent