From 1abebe50a57e8f62129d4a3613159ecba7465eae Mon Sep 17 00:00:00 2001 From: Sarka Chwastkova Date: Wed, 27 Nov 2024 15:18:19 +0100 Subject: [PATCH 1/2] 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( 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; From 119d8e2eee5fdfa5546b631fd0408c7f40a02ac6 Mon Sep 17 00:00:00 2001 From: Sarka Chwastkova Date: Wed, 27 Nov 2024 16:45:37 +0100 Subject: [PATCH 2/2] docs(HorizontalScroll): add spacing values for example playground --- .../__examples__/HorizontalScroll/default.tsx | 15 ++++++- .../src/HorizontalScroll/index.tsx | 39 ++----------------- 2 files changed, 18 insertions(+), 36 deletions(-) diff --git a/docs/src/__examples__/HorizontalScroll/default.tsx b/docs/src/__examples__/HorizontalScroll/default.tsx index bd13395d2b..8ed67e4a31 100644 --- a/docs/src/__examples__/HorizontalScroll/default.tsx +++ b/docs/src/__examples__/HorizontalScroll/default.tsx @@ -88,7 +88,20 @@ export default { { name: "spacing", type: "select", - options: ["none", "50", "100", "200", "300", "400", "600", "800", "1000"], + options: [ + "none", + "50", + "100", + "150", + "200", + "300", + "400", + "600", + "800", + "1000", + "1200", + "1600", + ], defaultValue: "none", }, ], diff --git a/packages/orbit-components/src/HorizontalScroll/index.tsx b/packages/orbit-components/src/HorizontalScroll/index.tsx index 9fc5f3fcfd..136afefef5 100644 --- a/packages/orbit-components/src/HorizontalScroll/index.tsx +++ b/packages/orbit-components/src/HorizontalScroll/index.tsx @@ -10,7 +10,6 @@ import useScrollBox from "./useScroll"; import ChevronBackward from "../icons/ChevronBackward"; import ChevronForward from "../icons/ChevronForward"; import type { Props, ScrollSnap } from "./types"; -import { DEPRECATED_SPACINGS, SPACINGS } from "../utils/layout/consts"; const getSnap = (scrollSnap: ScrollSnap) => { if (scrollSnap === "mandatory") return "x mandatory"; @@ -19,35 +18,6 @@ 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, @@ -104,8 +74,6 @@ const HorizontalScroll = React.forwardRef( 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; @@ -136,13 +104,14 @@ const HorizontalScroll = React.forwardRef( if (scrollEl) { const scrollWidth = scrollEl.scrollWidth - scrollEl.clientWidth; const { scrollLeft } = scrollEl; - if (scrollLeft - TRIGGER_OFFSET <= 0) { + + if (scrollLeft === 0) { setReachedStart(true); } else { setReachedStart(false); } - if (scrollLeft + TRIGGER_OFFSET >= scrollWidth) { + if (scrollLeft >= scrollWidth) { setReachedEnd(true); } else { setReachedEnd(false); @@ -162,7 +131,7 @@ const HorizontalScroll = React.forwardRef( return () => { window.removeEventListener("resize", handleResize); }; - }, [handleOverflow, handleResize]); + }, [handleOverflow, handleResize, scrollWrapperRef.current?.scrollWidth]); return (