fix scrollbox intersectional observer

ensdomains · Aug 28, 2024 · 6bff93b · 6bff93b
1 parent fd4e19b
commit 6bff93b
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx
@@ -64,13 +64,13 @@ describe('<ScrollBox />', () => {
     mockIntersectionObserver(true, false)
     render(<Component />)
   })
-  it.skip('should only show top line when intersecting with bottom', () => {
+  it('should only show top line when intersecting with bottom', () => {
     mockIntersectionObserver(false, true)
     render(<Component />)
     expectLine('top', true)
     expectLine('bottom', false)
   })
-  it.skip('should show both lines neither intersecting', () => {
+  it('should show both lines neither intersecting', () => {
     mockIntersectionObserver(false, false)
     render(<Component />)
     expectLine('top', true)
@@ -116,7 +116,7 @@ describe('<ScrollBox />', () => {
     expectLine('top', false)
     expectLine('bottom', false)
   })
-  it.skip('should fire callback on intersection', () => {
+  it('should fire callback on intersection', () => {
     mockIntersectionObserver(true, false)
     const onReachedTop = vi.fn()
     render(<Component onReachedTop={onReachedTop} />)

diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.tsx
@@ -167,6 +167,7 @@ export const ScrollBox = ({
               }
             : {}
         }
+        ref={ref}
       >
         <Box
           data-testid="scrollbox-top-intersect"

diff --git a/components/src/components/atoms/ScrollBox/styles.css.ts b/components/src/components/atoms/ScrollBox/styles.css.ts
@@ -27,7 +27,7 @@ export const scrollBox = style({
     '&::-webkit-scrollbar-thumb': {
       transition: 'box-shadow 0.15s ease-in-out',
       boxShadow: `inset 0 0 ${commonVars.space['3']} ${commonVars.space['3']} ${modeVars.color.greyLight}`,
-      border: 'solid $1 transparent',
+      border: `solid ${commonVars.space['1']} transparent`,
       borderRadius: commonVars.space['3'],
       backgroundColor: 'transparent',
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -167,6 +167,7 @@ export const ScrollBox = ({ @@
                   }
                 : {}
             }
+            ref={ref}
           >
             <Box
               data-testid="scrollbox-top-intersect"
@@ Expand Down @@