fix(AnalyticalTable): use global UI5 scrollbar styles

Author: Lukas742

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

@@ -148,13 +148,6 @@
   overflow-y: auto;
   scrollbar-width: none;
   box-sizing: border-box;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    width: 0 !important;
-    height: 0 !important;
-    display: none !important;
-  }
 }
 
 .alternateRowColor {
@@ -600,56 +593,14 @@
   background-color: var(--sapList_HeaderBackground);
   border-inline-start: 1px solid var(--sapList_BorderColor);
   margin-inline-start: -1px;
-  width: calc(var(--sapScrollBar_Dimension) + 2px);
 }
 .scrollbar {
+  box-sizing: border-box;
   overflow-y: auto;
   border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
   border-block-end: 1px solid var(--sapList_TableFooterBorder);
   border-inline-start: 1px solid var(--sapList_BorderColor);
   margin-inline-start: -1px;
-  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 {

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

@@ -10,12 +10,11 @@ interface VerticalScrollbarProps {
   tableRef: MutableRefObject<HTMLDivElement>;
   tableBodyHeight: number;
   scrollContainerRef: MutableRefObject<HTMLDivElement>;
-  nativeScrollbar: boolean;
   classNames: ClassNames;
 }
 
 export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarProps>((props, ref) => {
-  const { internalRowHeight, tableRef, tableBodyHeight, scrollContainerRef, nativeScrollbar, classNames } = props;
+  const { internalRowHeight, tableRef, tableBodyHeight, scrollContainerRef, classNames } = props;
   const hasHorizontalScrollbar = tableRef?.current?.offsetWidth !== tableRef?.current?.scrollWidth;
   const horizontalScrollbarSectionStyles = clsx(hasHorizontalScrollbar && classNames.bottomSection);
 
@@ -36,12 +35,7 @@ export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarPro
         style={{
           height: tableRef.current ? `${tableBodyHeight}px` : '0',
         }}
-        className={clsx(
-          classNames.scrollbar,
-          nativeScrollbar
-            ? 'ui5-content-native-scrollbars'
-            : `ui5-content-native-scrollbars ${classNames.analyticalTableDelta}`,
-        )}
+        className={clsx(classNames.scrollbar)}
         data-component-name="AnalyticalTableVerticalScrollbar"
         tabIndex={-1}
       >