From 5cf06cd071072959b04b8bf516cec1120a928e70 Mon Sep 17 00:00:00 2001
From: Souma Ghosh <103924539+souma-ghosh@users.noreply.github.com>
Date: Tue, 23 Aug 2022 12:02:48 +0530
Subject: [PATCH] fix: Table Widget shows scrollbar when not in focus (#15573)

* fix: Table Widget shows scrollbar when not in focus

* Scroll bar fix for table widget v1

* - Shows all table scrollbars on hover for table widget v2
- Extends ScrollIndicator component to support showScrollbarOnHover functionality

* json field spec fix

* Changes requested in review

* index.js revert

* Review changes

* Club hover and active css together in scrollbarOnHoverCSS

* Fix "scroll thumb not visible until first scroll" issue

* Fix some typos in comment

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
---
 .../widgets/TableWidget/component/Table.tsx   |  1 +
 .../TableWidgetV2/component/Constants.ts      | 23 +++++++++++++++++++
 .../widgets/TableWidgetV2/component/Table.tsx |  8 ++++++-
 .../component/TableStyledWrappers.tsx         |  9 +++-----
 4 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/app/client/src/widgets/TableWidget/component/Table.tsx b/app/client/src/widgets/TableWidget/component/Table.tsx
index 4de422ec36..668528ec3a 100644
--- a/app/client/src/widgets/TableWidget/component/Table.tsx
+++ b/app/client/src/widgets/TableWidget/component/Table.tsx
@@ -288,6 +288,7 @@ export function Table(props: TableProps) {
         ref={tableWrapperRef}
       >
         <Scrollbars
+          autoHide
           renderThumbHorizontal={ScrollbarHorizontalThumb}
           style={{
             width: props.width,
diff --git a/app/client/src/widgets/TableWidgetV2/component/Constants.ts b/app/client/src/widgets/TableWidgetV2/component/Constants.ts
index eba72a14bd..2945112243 100644
--- a/app/client/src/widgets/TableWidgetV2/component/Constants.ts
+++ b/app/client/src/widgets/TableWidgetV2/component/Constants.ts
@@ -372,3 +372,26 @@ export enum CheckboxState {
   CHECKED = 1,
   PARTIAL = 2,
 }
+
+export const scrollbarOnHoverCSS = `
+  .track-horizontal {
+    height: 6px;
+    bottom: 1px;
+    width: 100%;
+    opacity: 0;
+    transition: opacity 0.15s ease-in;
+    &:active {
+      opacity: 1;
+    }
+  }
+  &:hover {
+    .track-horizontal {
+      opacity: 1;
+    }
+  }
+  .thumb-horizontal {
+    &:hover, &:active {
+      height: 6px !important;
+    }
+  }
+`;
diff --git a/app/client/src/widgets/TableWidgetV2/component/Table.tsx b/app/client/src/widgets/TableWidgetV2/component/Table.tsx
index adc0e5f6e5..d246f755f7 100644
--- a/app/client/src/widgets/TableWidgetV2/component/Table.tsx
+++ b/app/client/src/widgets/TableWidgetV2/component/Table.tsx
@@ -100,6 +100,10 @@ function ScrollbarHorizontalThumb(props: any) {
   return <div {...props} className="thumb-horizontal" />;
 }
 
+function ScrollbarHorizontalTrack(props: any) {
+  return <div {...props} className="track-horizontal" />;
+}
+
 export function Table(props: TableProps) {
   const isResizingColumn = React.useRef(false);
 
@@ -246,9 +250,9 @@ export function Table(props: TableProps) {
           width={props.width}
         >
           <Scrollbars
-            autoHide
             renderThumbHorizontal={ScrollbarHorizontalThumb}
             renderThumbVertical={ScrollbarVerticalThumb}
+            renderTrackHorizontal={ScrollbarHorizontalTrack}
             style={style}
           >
             <TableHeaderInnerWrapper
@@ -296,6 +300,7 @@ export function Table(props: TableProps) {
       >
         <Scrollbars
           renderThumbHorizontal={ScrollbarHorizontalThumb}
+          renderTrackHorizontal={ScrollbarHorizontalTrack}
           style={{
             width: props.width,
             height: isHeaderVisible ? props.height - 48 : props.height,
@@ -422,6 +427,7 @@ export function Table(props: TableProps) {
       <ScrollIndicator
         containerRef={tableBodyRef}
         mode="LIGHT"
+        showScrollbarOnlyOnHover
         top={props.editMode ? "70px" : "73px"}
       />
     </TableWrapper>
diff --git a/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx b/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx
index 83606f61e0..c258a1e539 100644
--- a/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx
+++ b/app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx
@@ -10,6 +10,7 @@ import {
   TABLE_SIZES,
   CellAlignment,
   VerticalAlignment,
+  scrollbarOnHoverCSS,
 } from "./Constants";
 import { Colors, Color } from "constants/Colors";
 import { hideScrollbar, invisible } from "constants/DefaultTheme";
@@ -52,13 +53,11 @@ export const TableWrapper = styled.div<{
     width: ${(props) => props.width}px;
     overflow-x: auto;
     ${hideScrollbar};
+    ${scrollbarOnHoverCSS};
     .thumb-horizontal {
       height: 4px !important;
       border-radius: ${(props) => props.theme.radii[3]}px;
       background: ${(props) => props.theme.colors.scrollbarLight} !important;
-      &:hover {
-        height: 6px !important;
-      }
     }
   }
   .table {
@@ -489,13 +488,11 @@ export const TableHeaderWrapper = styled.div<{
   min-height: ${(props) => props.tableSizes.TABLE_HEADER_HEIGHT}px;
   overflow-x: auto;
   ${hideScrollbar};
+  ${scrollbarOnHoverCSS};
   .thumb-horizontal {
     height: 4px !important;
     border-radius: ${(props) => props.theme.radii[3]}px;
     background: ${(props) => props.theme.colors.scrollbarLight};
-    &:hover {
-      height: 6px !important;
-    }
   }
 `;