fix(AnalyticalTable): fix border styles (#5028)

Author: Lukas742

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

@@ -156,7 +156,7 @@ const styles = {
       border: `1px solid ${ThemingParameters.sapList_TableGroupHeaderBorderColor}`,
       color: ThemingParameters.sapList_TextColor,
       '& $tableCell': {
-        borderInlineEnd: 'none'
+        borderInlineEnd: `1px solid transparent`
       }
     }
   },
@@ -178,7 +178,10 @@ const styles = {
     display: 'inline-flex',
     padding: '0 0.5rem',
     '&:first-child': {
-      borderInlineStart: `1px solid ${ThemingParameters.sapList_BorderColor}`
+      borderInlineStart: CustomThemingParameters.AnalyticalTableOuterCellBorder
+    },
+    '&:last-child': {
+      borderInlineEnd: CustomThemingParameters.AnalyticalTableOuterCellBorder
     },
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -193,6 +196,11 @@ const styles = {
       }
     }
   },
+  showVerticalEndBorder: {
+    '& $tableCell': {
+      borderInlineEnd: `1px solid ${ThemingParameters.sapList_BorderColor}`
+    }
+  },
   noDataContainer: {
     display: 'flex',
     justifyContent: 'center',

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx

@@ -38,6 +38,7 @@ interface ColumnHeaderContainerProps {
   columnVirtualizer: Virtualizer<DivWithCustomScrollProp>;
   scaleXFactor?: number;
   uniqueId: string;
+  showVerticalEndBorder: boolean;
 }
 
 const useStyles = createUseStyles(styles, { name: 'Resizer' });
@@ -59,7 +60,8 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
     portalContainer,
     columnVirtualizer,
     scaleXFactor,
-    uniqueId
+    uniqueId,
+    showVerticalEndBorder
   } = props;
 
   const classes = useStyles();
@@ -100,6 +102,7 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
             )}
             <ColumnHeader
               {...rest}
+              showVerticalEndBorder={showVerticalEndBorder}
               id={`${uniqueId}${rest?.id ?? ''}`}
               columnId={rest.id}
               visibleColumnIndex={index}

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

@@ -9,7 +9,6 @@ import type {
   AriaAttributes,
   CSSProperties,
   DragEventHandler,
-  FC,
   KeyboardEventHandler,
   MouseEventHandler,
   ReactNode
@@ -41,6 +40,7 @@ export interface ColumnHeaderProps {
   portalContainer: Element;
   scaleXFactor?: number;
   columnId?: string;
+  showVerticalEndBorder: boolean;
 
   //getHeaderProps()
   id: string;
@@ -56,10 +56,28 @@ export interface ColumnHeaderProps {
 }
 
 const styles = {
+  thContainer: {
+    '&:first-child': {
+      '& > [role="columnheader"]': {
+        borderInlineStart: CustomThemingParameters.AnalyticalTableOuterCellBorder
+      }
+    },
+    '&:last-child': {
+      '& > [role="columnheader"]': {
+        borderInlineEnd: CustomThemingParameters.AnalyticalTableOuterCellBorder
+      }
+    }
+  },
+  verticalEndBorder: {
+    '&:last-child': {
+      '& > [role="columnheader"]': {
+        borderInlineEnd: `1px solid ${ThemingParameters.sapList_BorderColor}`
+      }
+    }
+  },
   header: {
     height: '100%',
     display: 'flex',
-    justifyContent: 'begin',
     alignItems: 'center',
     textAlign: 'start',
     fontFamily: CustomThemingParameters.AnalyticalTableHeaderFontFamily,
@@ -95,7 +113,7 @@ const styles = {
 
 const useStyles = createUseStyles(styles, { name: 'TableColumnHeader' });
 
-export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) => {
+export const ColumnHeader = (props: ColumnHeaderProps) => {
   const classes = useStyles();
   const {
     id,
@@ -125,7 +143,8 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     scaleXFactor,
     isFiltered,
     'aria-label': ariaLabel,
-    'aria-sort': ariaSort
+    'aria-sort': ariaSort,
+    showVerticalEndBorder
   } = props;
 
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -197,6 +216,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
   return (
     <div
       ref={columnHeaderRef}
+      className={clsx(classes.thContainer, showVerticalEndBorder && classes.verticalEndBorder)}
       style={{
         position: 'absolute',
         top: 0,

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx

@@ -1,5 +1,4 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
-import { clsx } from 'clsx';
 import type { MutableRefObject } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { AnalyticalTablePropTypes } from '../index.js';
@@ -48,7 +47,6 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
     }
   }, [parentRef.current]);
 
-  const classNames = clsx(classes.tbody);
   const dataLength = rows.length;
 
   const lastScrollTop = useRef(0);
@@ -111,7 +109,7 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
 
   return (
     <div
-      className={classNames}
+      className={classes.tbody}
       ref={parentRef}
       onScroll={onScroll}
       style={{

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

@@ -1105,12 +1105,6 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     verticalScrollBarRef.current.isExternalVerticalScroll = false;
   };
 
-  const tableClasses = clsx(
-    classes.table,
-    GlobalStyleClasses.sapScrollBar,
-    withNavigationHighlight && classes.hasNavigationIndicator
-  );
-
   const columnVirtualizer = useVirtualizer({
     count: visibleColumnsWidth.length,
     getScrollElement: () => tableRef.current,
@@ -1124,6 +1118,16 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     overscan: overscanCountHorizontal
   });
 
+  const totalSize = columnVirtualizer.getTotalSize();
+  const showVerticalEndBorder = tableState.tableClientWidth > totalSize;
+
+  const tableClasses = clsx(
+    classes.table,
+    GlobalStyleClasses.sapScrollBar,
+    withNavigationHighlight && classes.hasNavigationIndicator,
+    showVerticalEndBorder && classes.showVerticalEndBorder
+  );
+
   scrollToRef.current = {
     ...scrollToRef.current,
     horizontalScrollToOffset: columnVirtualizer.scrollToOffset,
@@ -1198,6 +1202,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                     columnVirtualizer={columnVirtualizer}
                     scaleXFactor={scaleXFactor}
                     uniqueId={uniqueId}
+                    showVerticalEndBorder={showVerticalEndBorder}
                   />
                 )
               );

packages/main/src/themes/CustomVariables.ts

@@ -11,6 +11,7 @@ export enum CustomVariables {
   AnalyticalTableHeaderFontFamily = '--_ui5wcr-AnalyticalTable-HeaderFontFamily',
   AnalyticalTableOuterBorderBlock = '--_ui5wcr-AnalyticalTable-OuterBorderBlock',
   AnalyticalTableOuterBorderInline = '--_ui5wcr-AnalyticalTable-OuterBorderInline',
+  AnalyticalTableOuterCellBorder = '--_ui5wcr-AnalyticalTable-OuterCellBorder',
   ObjectPageSectionBorderTop = '--_ui5wcr_ObjectPage_SectionBorderTop',
   ObjectPageSectionTitleFontFamily = '--_ui5wcr_ObjectPage_SectionTitleFontFamily',
   ObjectPageSectionTitleHeight = '--_ui5wcr_ObjectPage_SectionTitleHeight',

packages/main/src/themes/base.ts

@@ -12,6 +12,7 @@ export const baseParameters: Partial<Record<CustomVariables, string>> = {
   [CustomVariables.AnalyticalTableHeaderFontFamily]: ThemingParameters.sapFontFamily,
   [CustomVariables.AnalyticalTableOuterBorderBlock]: `1px solid ${ThemingParameters.sapList_BorderColor}`,
   [CustomVariables.AnalyticalTableOuterBorderInline]: `1px solid ${ThemingParameters.sapList_BorderColor}`,
+  [CustomVariables.AnalyticalTableOuterCellBorder]: `1px solid ${ThemingParameters.sapList_BorderColor}`,
   [CustomVariables.ObjectPageSectionBorderTop]: `0.0625rem solid ${ThemingParameters.sapGroup_TitleBorderColor}`,
   [CustomVariables.ObjectPageSectionTitleFontFamily]: ThemingParameters.sapFontFamily,
   [CustomVariables.ObjectPageSectionTitleHeight]: '2.25rem',

packages/main/src/themes/sap_horizon.ts

@@ -10,6 +10,7 @@ export const sapHorizonParameters: Partial<Record<CustomVariables, string>> = {
   [CustomVariables.AnalyticalTableHeaderFontFamily]: ThemingParameters.sapFontBoldFamily,
   [CustomVariables.AnalyticalTableOuterBorderBlock]: 'none',
   [CustomVariables.AnalyticalTableOuterBorderInline]: 'none',
+  [CustomVariables.AnalyticalTableOuterCellBorder]: `1px solid transparent`,
   [CustomVariables.ObjectPageSectionBorderTop]: 'none',
   [CustomVariables.ObjectPageSectionTitleFontFamily]: ThemingParameters.sapFontBoldFamily,
   [CustomVariables.ObjectPageSectionTitleHeight]: '2.75rem',

packages/main/src/themes/sap_horizon_dark.ts

@@ -10,6 +10,7 @@ export const sapHorizonDarkParameters: Partial<Record<CustomVariables, string>>
   [CustomVariables.AnalyticalTableHeaderFontFamily]: ThemingParameters.sapFontBoldFamily,
   [CustomVariables.AnalyticalTableOuterBorderBlock]: 'none',
   [CustomVariables.AnalyticalTableOuterBorderInline]: 'none',
+  [CustomVariables.AnalyticalTableOuterCellBorder]: `1px solid transparent`,
   [CustomVariables.ObjectPageSectionTitleFontFamily]: ThemingParameters.sapFontBoldFamily,
   [CustomVariables.ObjectPageSectionTitleLineHeight]: '4rem',
   [CustomVariables.ObjectPageSectionTitleHeight]: '2.75rem',

packages/main/src/themes/sap_horizon_hcb.ts

@@ -20,5 +20,6 @@ export const sapHorizonHcbParameters: Partial<Record<CustomVariables, string>> =
   [CustomVariables.AnalyticalTableHeaderFontFamily]: ThemingParameters.sapFontBoldFamily,
   [CustomVariables.AnalyticalTableHeaderActiveTextColor]: ThemingParameters.sapContent_ContrastTextColor,
   [CustomVariables.AnalyticalTableHeaderBorderWidth]: '0.188rem',
-  [CustomVariables.AnalyticalTableOuterBorderInline]: 'none'
+  [CustomVariables.AnalyticalTableOuterBorderInline]: 'none',
+  [CustomVariables.AnalyticalTableOuterCellBorder]: `1px solid transparent`
 };

packages/main/src/themes/sap_horizon_hcw.ts

@@ -20,5 +20,6 @@ export const sapHorizonHcwParameters: Partial<Record<CustomVariables, string>> =
   [CustomVariables.AnalyticalTableHeaderFontFamily]: ThemingParameters.sapFontBoldFamily,
   [CustomVariables.AnalyticalTableHeaderActiveTextColor]: ThemingParameters.sapContent_ContrastTextColor,
   [CustomVariables.AnalyticalTableHeaderBorderWidth]: '0.188rem',
-  [CustomVariables.AnalyticalTableOuterBorderInline]: 'none'
+  [CustomVariables.AnalyticalTableOuterBorderInline]: 'none',
+  [CustomVariables.AnalyticalTableOuterCellBorder]: `1px solid transparent`
 };