AnalyticalTable: use custom scrollbar styles

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css

@@ -572,9 +572,13 @@
 }
 
 /* ==========================================================================
-   VerticalScrollbar styles
+   (Vertical)Scrollbar styles
    ========================================================================== */
 
+.verticalScrollbarContainer {
+  position: relative;
+}
+
 .headerSection {
   box-sizing: border-box;
   border-block-start: var(--_ui5wcr-AnalyticalTable-OuterBorderBlock);
@@ -594,6 +598,52 @@
   box-sizing: border-box;
 }
 
+.scrollbar:global(.ui5-content-native-scrollbars) {
+  background-color: var(--sapList_Background);
+  width: calc(var(--sapScrollBar_Dimension) + 2px);
+}
+
+.analyticalTableDelta:global(.ui5-content-native-scrollbars) {
+  &::-webkit-scrollbar {
+    background-color: var(--sapScrollBar_TrackColor);
+    -webkit-border-start: var(--_ui5wcr_Scrollbar_Border);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: var(--_ui5wcr_Scrollbar_BorderRadius);
+    background-color: var(--sapScrollBar_FaceColor);
+
+    &:hover {
+      background-color: var(--sapScrollBar_FaceColor);
+    }
+
+    &:horizontal {
+      height: var(--sapScrollBar_Dimension);
+    }
+
+    &:vertical {
+      width: var(--sapScrollBar_Dimension);
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: var(--sapScrollBar_TrackColor);
+  }
+
+  &::-webkit-scrollbar:horizontal {
+    height: var(--sapScrollBar_Dimension);
+  }
+
+  &::-webkit-scrollbar:vertical {
+    width: var(--sapScrollBar_Dimension);
+  }
+}
+
+.verticalScroller {
+  width: 1px;
+  background-color: var(--sapList_Background);
+}
+
 .bottomSection {
   flex-grow: 1;
   background-color: var(--sapList_FooterBackground);

packages/main/src/components/AnalyticalTable/index.tsx

@@ -188,6 +188,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
   useStylesheet(styleData, AnalyticalTable.displayName);
   const isInitialized = useRef(false);
 
+  const nativeScrollbar = className?.includes('ui5-content-native-scrollbars');
   const alwaysShowSubComponent =
     subComponentsBehavior === AnalyticalTableSubComponentsBehavior.Visible ||
     subComponentsBehavior === AnalyticalTableSubComponentsBehavior.IncludeHeight;
@@ -700,7 +701,9 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     classNames.table,
     withNavigationHighlight && classNames.hasNavigationIndicator,
     showVerticalEndBorder && classNames.showVerticalEndBorder,
-    className?.includes('ui5-content-native-scrollbars') && 'ui5-content-native-scrollbars',
+    nativeScrollbar
+      ? 'ui5-content-native-scrollbars'
+      : `ui5-content-native-scrollbars ${classNames.analyticalTableDelta}`,
   );
 
   const handleOnLoadMore = (e) => {
@@ -898,7 +901,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
               ref={verticalScrollBarRef}
               scrollContainerRef={scrollContainerRef}
               parentRef={parentRef}
-              nativeScrollbar={className?.includes('ui5-content-native-scrollbars')}
+              nativeScrollbar={nativeScrollbar}
               classNames={classNames}
             />
           )}

packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx

@@ -1,4 +1,4 @@
-import { ThemingParameters, useSyncRef } from '@ui5/webcomponents-react-base';
+import { useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { MutableRefObject, RefObject } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
@@ -51,7 +51,7 @@ export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarPro
   return (
     <FlexBox
       direction={FlexBoxDirection.Column}
-      style={{ position: 'relative' }}
+      className={classNames.verticalScrollbarContainer}
       data-component-name="AnalyticalTableVerticalScrollbarContainer"
     >
       <div
@@ -66,16 +66,20 @@ export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarPro
           height: tableRef.current ? `${tableBodyHeight}px` : '0',
         }}
         onScroll={handleVerticalScrollBarScroll}
-        className={clsx(classNames.scrollbar, nativeScrollbar && 'ui5-content-native-scrollbars')}
+        className={clsx(
+          classNames.scrollbar,
+          nativeScrollbar
+            ? 'ui5-content-native-scrollbars'
+            : `ui5-content-native-scrollbars ${classNames.analyticalTableDelta}`,
+        )}
         data-component-name="AnalyticalTableVerticalScrollbar"
         tabIndex={-1}
       >
         <div
           ref={scrollElementRef}
+          className={classNames.verticalScroller}
           style={{
             height: `${scrollContainerRef.current?.scrollHeight}px`,
-            width: '1px',
-            backgroundColor: ThemingParameters.sapList_Background,
           }}
         />
       </div>

packages/main/src/components/ThemeProvider/ThemeProvider.css

@@ -14,38 +14,4 @@
 @import '../../themes/sap_horizon_hcb.css';
 @import '../../themes/sap_horizon_hcw.css';
 
-:not(.ui5-content-native-scrollbars) {
-  &::-webkit-scrollbar {
-    background-color: var(--sapScrollBar_TrackColor);
-    -webkit-border-start: var(--_ui5wcr_Scrollbar_Border);
-  }
 
-  &::-webkit-scrollbar-thumb {
-    border-radius: var(--_ui5wcr_Scrollbar_BorderRadius);
-    background-color: var(--sapScrollBar_FaceColor);
-
-    &:hover {
-      background-color: var(--sapScrollBar_Hover_FaceColor);
-    }
-
-    &:horizontal {
-      height: var(--sapScrollBar_Dimension);
-    }
-
-    &:vertical {
-      width: var(--sapScrollBar_Dimension);
-    }
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: var(--sapScrollBar_TrackColor);
-  }
-
-  &::-webkit-scrollbar:horizontal {
-    height: var(--sapScrollBar_Dimension);
-  }
-
-  &::-webkit-scrollbar:vertical {
-    width: var(--sapScrollBar_Dimension);
-  }
-}