From 953cf2bc2a0fb1383a417d45fc37f4865735025e Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Wed, 27 Nov 2024 15:18:19 +0100
Subject: [PATCH] fix(HorizontalScroll): adjust arrows visibility when
 component is overflowing

---
 .../src/HorizontalScroll/index.tsx            | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/orbit-components/src/HorizontalScroll/index.tsx b/packages/orbit-components/src/HorizontalScroll/index.tsx
index 9dabe92ea7..9fc5f3fcfd 100644
--- a/packages/orbit-components/src/HorizontalScroll/index.tsx
+++ b/packages/orbit-components/src/HorizontalScroll/index.tsx
@@ -10,8 +10,7 @@ import useScrollBox from "./useScroll";
 import ChevronBackward from "../icons/ChevronBackward";
 import ChevronForward from "../icons/ChevronForward";
 import type { Props, ScrollSnap } from "./types";
-
-const TRIGGER_OFFSET = 20;
+import { DEPRECATED_SPACINGS, SPACINGS } from "../utils/layout/consts";
 
 const getSnap = (scrollSnap: ScrollSnap) => {
   if (scrollSnap === "mandatory") return "x mandatory";
@@ -20,6 +19,35 @@ const getSnap = (scrollSnap: ScrollSnap) => {
   return scrollSnap;
 };
 
+const getTriggerOffset = (spacing: string) => {
+  const spacingValues = {
+    [SPACINGS.NONE]: 0,
+    [SPACINGS.FIFTY]: 2,
+    [SPACINGS.ONE_HUNDRED]: 4,
+    [SPACINGS.ONE_HUNDRED_FIFTY]: 6,
+    [SPACINGS.TWO_HUNDRED]: 8,
+    [SPACINGS.THREE_HUNDRED]: 12,
+    [SPACINGS.FOUR_HUNDRED]: 16,
+    [SPACINGS.FIVE_HUNDRED]: 20,
+    [SPACINGS.SIX_HUNDRED]: 24,
+    [SPACINGS.EIGHT_HUNDRED]: 32,
+    [SPACINGS.ONE_THOUSAND]: 40,
+    [SPACINGS.ONE_THOUSAND_TWO_HUNDRED]: 48,
+    [SPACINGS.ONE_THOUSAND_SIX_HUNDRED]: 64,
+    [DEPRECATED_SPACINGS.XXXSMALL]: 2, // DEPRECATED
+    [DEPRECATED_SPACINGS.XXSMALL]: 4, // DEPRECATED
+    [DEPRECATED_SPACINGS.XSMALL]: 8, // DEPRECATED
+    [DEPRECATED_SPACINGS.SMALL]: 12, // DEPRECATED
+    [DEPRECATED_SPACINGS.MEDIUM]: 16, // DEPRECATED
+    [DEPRECATED_SPACINGS.LARGE]: 24, // DEPRECATED
+    [DEPRECATED_SPACINGS.XLARGE]: 32, // DEPRECATED
+    [DEPRECATED_SPACINGS.XXLARGE]: 40, // DEPRECATED
+    [DEPRECATED_SPACINGS.XXXLARGE]: 52, // DEPRECATED
+  };
+
+  return spacingValues[spacing];
+};
+
 const ArrowButton = ({
   children,
   className,
@@ -76,6 +104,8 @@ const HorizontalScroll = React.forwardRef<HTMLDivElement, Props>(
     const theme = useTheme();
     const scrollEl = scrollWrapperRef.current;
 
+    const TRIGGER_OFFSET = getTriggerOffset(spacing);
+
     const handleOverflow = React.useCallback(() => {
       if (scrollWrapperRef.current?.scrollWidth && containerRef.current?.offsetWidth) {
         const { scrollWidth: containerScrollWidth } = scrollWrapperRef.current;