fix: table: updates scrollable div by removing deprecated css property (

#655) * fix: table: updates scrollable div by removing deprecated css property * chore: table: update snaps * chore: table: update border to hide in mozilla browsers * chore: table: updates snaps and sticky unit test
EightfoldAI · Jun 27, 2023 · ee4c5d6 · ee4c5d6
1 parent 0c00967
commit ee4c5d6
Show file tree

Hide file tree

Showing 23 changed files with 376 additions and 445 deletions.
diff --git a/src/components/DateTimePicker/DatePicker/Styles/mixins.scss b/src/components/DateTimePicker/DatePicker/Styles/mixins.scss
@@ -61,8 +61,12 @@ $picker-input-padding-vertical: max(
 
   &::-webkit-scrollbar {
     background-color: transparent;
-    height: 16px;
-    width: 16px;
+    height: $space-m;
+    width: $space-m;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
   }
 
   &::-webkit-scrollbar-corner {
@@ -71,85 +75,18 @@ $picker-input-padding-vertical: max(
 
   &::-webkit-scrollbar-thumb {
     background-color: transparent;
+    border: 5px solid transparent;
+    border-radius: $border-radius-xl;
+    box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
   }
 
   &::-webkit-scrollbar-track {
     -webkit-box-shadow: none;
     background-color: transparent;
   }
 
-  @supports (overflow: overlay) {
-    overflow: overlay;
-
-    &:focus-within,
-    &:focus-visible,
-    &:hover,
-    &:hover:focus {
-      &::-webkit-scrollbar {
-        display: block;
-        height: 16px;
-        width: 16px;
-      }
-
-      &::-webkit-scrollbar-button {
-        display: none;
-      }
-
-      &::-webkit-scrollbar-corner {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: transparent;
-        border: 5px solid transparent;
-        border-radius: 24px;
-        box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
-      }
-    }
-  }
-
-  @supports not (overflow: overlay) {
-    overflow: auto;
-
-    &:focus-within,
-    &:focus-visible,
-    &:hover,
-    &:hover:focus {
-      -ms-overflow-style: none;
-      scrollbar-width: thin;
-
-      &::-webkit-scrollbar {
-        background-color: var(--picker-background-color);
-        height: 16px;
-        width: 16px;
-      }
-
-      &::-webkit-scrollbar-corner {
-        background-color: var(--picker-background-color);
-        border: 1px solid var(--picker-background-color);
-        border-bottom-right-radius: $picker-partial-border-radius;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: transparent;
-        border: 5px solid transparent;
-        border-radius: 24px;
-        box-shadow: 4px 0px 0px 4px rgba(105, 113, 127, 0.7) inset;
-      }
-
-      &::-webkit-scrollbar-track {
-        -webkit-box-shadow: none;
-        background-color: var(--picker-background-color);
-      }
-    }
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
   }
 }
 

diff --git a/src/components/Table/Internal/Body/Scroller.tsx b/src/components/Table/Internal/Body/Scroller.tsx
@@ -9,7 +9,11 @@ import React, {
 import { ButtonShape, ButtonSize, SecondaryButton } from '../../../Button';
 import { IconName } from '../../../Icon';
 import { ColumnType } from '../../Table.types';
-import { ScrollerProps, ScrollerRef } from '../OcTable.types';
+import {
+  ScrollerProps,
+  ScrollerRef,
+  VERTICAL_SCROLL_OFFSET,
+} from '../OcTable.types';
 
 import styles from '../octable.module.scss';
 
@@ -24,9 +28,10 @@ export const Scroller = React.forwardRef(
       scrollBodyRef,
       stickyOffsets,
       scrollHeaderRef,
-      titleRef,
       scrollLeftAriaLabelText,
       scrollRightAriaLabelText,
+      titleRef,
+      verticalScroll = false,
     }: ScrollerProps<RecordType>,
     ref: ForwardedRef<ScrollerRef>
   ) => {
@@ -82,12 +87,13 @@ export const Scroller = React.forwardRef(
       const { height: stickyHeaderHeight = 0 } =
         scrollHeaderRef?.current?.getBoundingClientRect?.() || {};
       return (
-        rowTop -
-        scrollBodyTop +
-        stickyHeaderHeight +
-        rowHeight / 2 -
-        BUTTON_HEIGHT / 2 +
-        titleHeight
+        (rowTop -
+          scrollBodyTop +
+          stickyHeaderHeight +
+          rowHeight / 2 -
+          BUTTON_HEIGHT / 2 +
+          titleHeight) |
+        0
       );
     };
 
@@ -118,7 +124,7 @@ export const Scroller = React.forwardRef(
       });
     };
 
-    const noScroller = (): boolean => {
+    const noHorizontalScroller = (): boolean => {
       return (
         scrollBodyRef?.current?.clientWidth >=
         scrollBodyRef?.current?.scrollWidth
@@ -163,7 +169,7 @@ export const Scroller = React.forwardRef(
       };
     }, []);
 
-    if (noScroller()) return null;
+    if (noHorizontalScroller()) return null;
 
     return (
       <>
@@ -185,7 +191,10 @@ export const Scroller = React.forwardRef(
         <SecondaryButton
           classNames={styles.scrollerButton}
           style={{
-            right: rightButtonOffset + BUTTON_PADDING,
+            right:
+              rightButtonOffset +
+              (verticalScroll ? VERTICAL_SCROLL_OFFSET : 0) +
+              BUTTON_PADDING,
             opacity: rightButtonVisible && visible ? 1 : 0,
             top: getButtonTop(),
           }}

diff --git a/src/components/Table/Internal/Cell/index.tsx b/src/components/Table/Internal/Cell/index.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef, memo, Ref, useContext, useMemo } from 'react';
 import { mergeClasses } from '../../../../shared/utilities';
 import shallowEqual from 'shallowequal';
+import { VERTICAL_SCROLL_OFFSET } from '../OcTable.types';
 import type {
   RenderedCell,
   CellType,
@@ -179,6 +180,10 @@ function Cell<RecordType extends DefaultRecordType>(
   if (isFixRight) {
     fixedStyle.position = 'sticky';
     fixedStyle.right = fixRight as number;
+
+    if (fixRight <= VERTICAL_SCROLL_OFFSET) {
+      fixedStyle.borderRightColor = 'transparent';
+    }
   }
 
   // ====================== Align =======================

diff --git a/src/components/Table/Internal/FixedHolder/index.tsx b/src/components/Table/Internal/FixedHolder/index.tsx
@@ -6,11 +6,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import {
-  fillRef,
-  isStyleSupport,
-  mergeClasses,
-} from '../../../../shared/utilities';
+import { fillRef, mergeClasses } from '../../../../shared/utilities';
 import ColGroup from '../ColGroup';
 import type { ColumnsType, ColumnType } from '../OcTable.types';
 import { FixedHeaderProps } from './FixedHolder.types';
@@ -56,11 +52,8 @@ const FixedHolder = forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
     ref
   ) => {
     const { scrollbarSize, isSticky } = useContext(TableContext);
-    const supportedScrollbarSize: number = isStyleSupport('scrollbar-gutter')
-      ? 0
-      : scrollbarSize;
     const combinationScrollBarSize: number =
-      isSticky && !fixHeader ? 0 : supportedScrollbarSize;
+      isSticky && !fixHeader ? 0 : scrollbarSize;
     const scrollRef: React.MutableRefObject<HTMLDivElement> =
       useRef<HTMLDivElement>(null);
 
@@ -90,7 +83,7 @@ const FixedHolder = forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
 
     // Check if all flattenColumns has width
     const allFlattenColumnsWithWidth: boolean = useMemo(
-      () => flattenColumns.every((column) => column.width >= 0),
+      () => flattenColumns.every((column) => Number(column.width) >= 0),
       [flattenColumns]
     );