fix(LayoutContent): briefly show scrollbar when scroll event occures

Author: tenphi

src/components/content/Layout/Layout.stories.tsx

@@ -445,7 +445,7 @@ export const CompleteApplicationShell: Story = {
             title="Navigation"
             onClose={() => setSidebarOpen(false)}
           />
-          <Layout.Content padding="1x" scrollbar="tiny" gap=".5x">
+          <Layout.Content padding=".5x" scrollbar="tiny" gap="1bw">
             {['Dashboard', 'Analytics', 'Reports', 'Users', 'Settings'].map(
               (item) => (
                 <ItemButton key={item} type="neutral" width="100%">
@@ -454,6 +454,14 @@ export const CompleteApplicationShell: Story = {
               ),
             )}
           </Layout.Content>
+          <Layout.Footer>
+            <Text preset="t4" color="#dark-03">
+              v2.4.1
+            </Text>
+            <Button type="link" size="small">
+              Help
+            </Button>
+          </Layout.Footer>
         </Layout.Panel>
 
         <Layout.Header

src/components/content/Layout/LayoutContent.tsx

@@ -59,7 +59,7 @@ const ContentElement = tasty({
       fill: '#dark.35',
       opacity: {
         '': 0,
-        '(hovered | focused) & scrollbar=tiny': 1,
+        '(hovered | focused | scrolling) & scrollbar=tiny': 1,
       },
       transition: 'opacity 0.15s',
       pointerEvents: 'none',
@@ -75,7 +75,7 @@ const ContentElement = tasty({
       fill: '#dark.35',
       opacity: {
         '': 0,
-        '(hovered | focused) & scrollbar=tiny': 1,
+        '(hovered | focused | scrolling) & scrollbar=tiny': 1,
       },
       transition: 'opacity 0.15s',
       pointerEvents: 'none',
@@ -111,8 +111,13 @@ function LayoutContent(
   const isTinyScrollbar = scrollbar === 'tiny';
   const { hoverProps, isHovered } = useHover({});
 
-  const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX } =
-    useTinyScrollbar(innerRef, isTinyScrollbar);
+  const {
+    handleVStyle,
+    handleHStyle,
+    hasOverflowY,
+    hasOverflowX,
+    isScrolling,
+  } = useTinyScrollbar(innerRef, isTinyScrollbar);
 
   const scrollbarStyle = useMemo(() => {
     if (!isTinyScrollbar) return {};
@@ -128,8 +133,9 @@ function LayoutContent(
       ...externalMods,
       scrollbar,
       hovered: isHovered,
+      scrolling: isScrolling,
     }),
-    [externalMods, scrollbar, isHovered],
+    [externalMods, scrollbar, isHovered, isScrolling],
   );
 
   // Merge styles: outer styles to root, inner styles to Inner element

src/components/content/Layout/LayoutPane.tsx

@@ -116,7 +116,7 @@ const PaneElement = tasty({
       fill: '#dark.35',
       opacity: {
         '': 0,
-        '(hovered | focused) & scrollbar=tiny': 1,
+        '(hovered | focused | scrolling) & scrollbar=tiny': 1,
       },
       transition: 'opacity 0.15s',
       pointerEvents: 'none',
@@ -135,7 +135,7 @@ const PaneElement = tasty({
       fill: '#dark.35',
       opacity: {
         '': 0,
-        '(hovered | focused) & scrollbar=tiny': 1,
+        '(hovered | focused | scrolling) & scrollbar=tiny': 1,
       },
       transition: 'opacity 0.15s',
       pointerEvents: 'none',
@@ -354,14 +354,18 @@ function LayoutPane(
     const inner = extractStyles(otherProps, INNER_STYLES);
 
     return { outerStyles: outer, innerStyles: inner };
-     
   }, [styles]); // Only recalculate when styles prop changes
 
   const isTinyScrollbar = scrollbar === 'tiny';
   const { hoverProps, isHovered } = useHover({});
 
-  const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX } =
-    useTinyScrollbar(innerRef, isTinyScrollbar);
+  const {
+    handleVStyle,
+    handleHStyle,
+    hasOverflowY,
+    hasOverflowX,
+    isScrolling,
+  } = useTinyScrollbar(innerRef, isTinyScrollbar);
 
   // Clamp size to min/max constraints
   const clampSize = useCallback(
@@ -435,6 +439,7 @@ function LayoutPane(
     () => ({
       scrollbar,
       hovered: isHovered,
+      scrolling: isScrolling,
       handlerHovered: debouncedHandlerHovered,
       focused: isHandlerFocused,
       disabled: !isResizable,
@@ -445,6 +450,7 @@ function LayoutPane(
     [
       scrollbar,
       isHovered,
+      isScrolling,
       debouncedHandlerHovered,
       isHandlerFocused,
       isResizable,

src/components/content/Layout/hooks/useTinyScrollbar.ts

@@ -3,6 +3,7 @@ import {
   RefObject,
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 
@@ -22,9 +23,11 @@ export interface TinyScrollbarResult {
   handleHStyle: CSSProperties;
   hasOverflowY: boolean;
   hasOverflowX: boolean;
+  isScrolling: boolean;
 }
 
 const MIN_HANDLE_SIZE = 20;
+const SCROLL_VISIBILITY_DURATION = 1000;
 
 export function useTinyScrollbar(
   ref: RefObject<HTMLElement | null>,
@@ -40,6 +43,8 @@ export function useTinyScrollbar(
     clientHeight: 0,
     clientWidth: 0,
   });
+  const [isScrolling, setIsScrolling] = useState(false);
+  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const updateScrollState = useCallback(() => {
     const element = ref.current;
@@ -78,7 +83,22 @@ export function useTinyScrollbar(
     updateScrollState();
 
     // Listen for scroll events
-    const handleScroll = () => updateScrollState();
+    const handleScroll = () => {
+      updateScrollState();
+
+      // Show scrollbar on scroll
+      setIsScrolling(true);
+
+      // Clear existing timeout
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+
+      // Hide scrollbar after delay
+      scrollTimeoutRef.current = setTimeout(() => {
+        setIsScrolling(false);
+      }, SCROLL_VISIBILITY_DURATION);
+    };
 
     element.addEventListener('scroll', handleScroll, { passive: true });
 
@@ -97,6 +117,10 @@ export function useTinyScrollbar(
     return () => {
       element.removeEventListener('scroll', handleScroll);
       resizeObserver.disconnect();
+
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
     };
   }, [enabled, ref, updateScrollState]);
 
@@ -159,5 +183,6 @@ export function useTinyScrollbar(
     } as CSSProperties,
     hasOverflowY: scrollState.hasOverflowY,
     hasOverflowX: scrollState.hasOverflowX,
+    isScrolling,
   };
 }