From 7e57d8eb0ac6f4cf51b0e21d4696e31172007170 Mon Sep 17 00:00:00 2001 From: preetibansalui <146315451+preetibansalui@users.noreply.github.com> Date: Tue, 11 Jun 2024 12:00:33 +0530 Subject: [PATCH] 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 <tay1orjones@users.noreply.github.com> --- packages/react/src/components/Tabs/Tabs.tsx | 11 +++++++---- packages/styles/scss/components/tabs/_tabs.scss | 9 +++++---- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index fab0367b0588..c441bbe3d3ca 100644 --- 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 index a60d611f954f..52cc8d8acde0 100644 --- 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