fix: Make useStickyScrollbar hook react to offset prop

cloudscape-design · Sep 13, 2023 · 3b157cc · 3b157cc
1 parent d8b1fd0
commit 3b157cc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/table/sticky-scrollbar/sticky-scrollbar.tsx b/src/table/sticky-scrollbar/sticky-scrollbar.tsx
@@ -39,8 +39,7 @@ function StickyScrollbar(
    */
   const { stickyOffsetBottom } = useAppLayoutContext();
 
-  useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, stickyOffsetBottom);
-
+  useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, stickyOffsetBottom, offsetScrollbar);
   return (
     <div
       ref={mergedRef}

diff --git a/src/table/sticky-scrollbar/styles.scss b/src/table/sticky-scrollbar/styles.scss
@@ -37,10 +37,6 @@
       margin-top: calc(-1 * awsui.$border-divider-section-width); // -1px to compensate for border width
       border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     }
-
-    &.is-visual-refresh {
-      margin-top: -5px;
-    }
   }
 }
 

diff --git a/src/table/sticky-scrollbar/use-sticky-scrollbar.ts b/src/table/sticky-scrollbar/use-sticky-scrollbar.ts
@@ -66,7 +66,8 @@ export function useStickyScrollbar(
   scrollbarContentRef: RefObject<HTMLDivElement>,
   tableRef: RefObject<HTMLTableElement>,
   wrapperRef: RefObject<HTMLDivElement>,
-  footerHeight: number
+  footerHeight: number,
+  offsetScrollbar: boolean
 ) {
   // We don't take into account containing-block calculations because that would
   // unnecessarily overcomplicate the position logic. For now, we assume that a
@@ -109,7 +110,15 @@ export function useStickyScrollbar(
         observer.disconnect();
       };
     }
-  }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);
+  }, [
+    scrollbarContentRef,
+    scrollbarRef,
+    tableRef,
+    wrapperRef,
+    consideredFooterHeight,
+    hasContainingBlock,
+    offsetScrollbar,
+  ]);
 
   // Update scrollbar position when window resizes (vertically).
   useEffect(() => {