feat(AnalyticalTable): add horizontal scrollbar in fiori design (#583)

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

@@ -12,7 +12,13 @@ const styles = {
     minHeight: '3rem',
     fontFamily: ThemingParameters.sapFontFamily,
     fontSize: ThemingParameters.sapFontSize,
-    fontWeight: 'normal'
+    fontWeight: 'normal',
+    '&::-webkit-scrollbar': {
+      height: ThemingParameters.sapScrollBar_Dimension
+    },
+    '&::-webkit-scrollbar-thumb': {
+      height: ThemingParameters.sapScrollBar_Dimension
+    }
   },
   tableHeaderRow: {
     height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,

packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -523,7 +523,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -1030,7 +1030,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -1529,7 +1529,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
   <div
     aria-colcount="5"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -2179,7 +2179,7 @@ exports[`AnalyticalTable custom row height 1`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -2686,7 +2686,7 @@ exports[`AnalyticalTable render without data 1`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -2958,7 +2958,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -3465,7 +3465,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -3972,7 +3972,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -4479,7 +4479,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -4986,7 +4986,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
   <div
     aria-colcount="6"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >
@@ -5621,7 +5621,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
   <div
     aria-colcount="4"
     aria-rowcount="5"
-    class="AnalyticalTable-table-0"
+    class="AnalyticalTable-table-0 sapScrollBar"
     data-per-page="15"
     role="grid"
   >

packages/main/src/components/AnalyticalTable/hooks/useStyling.ts

@@ -1,17 +1,20 @@
+import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL';
+import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
 import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior';
 import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
 import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
 import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
-import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL';
 import { CSSProperties } from 'react';
 
 const getTableProps = (tableProps, { instance }) => {
   const { classes } = instance.webComponentsReactProperties;
+  const classNames = StyleClassHelper.of(classes.table, GlobalStyleClasses.sapScrollBar).className;
   return [
     tableProps,
     {
-      className: classes.table
+      className: classNames
     }
   ];
 };