fix(AnalyticalTable): use correct border-bottom for selected row

Author: MarcusNotheis

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

@@ -5,18 +5,18 @@ const styles = {
   tableContainer: {
     width: '100%',
     height: `calc(100% - ${CssSizeVariables.sapWcrAnalyticalTableRowHeight})`,
-    minHeight: '3rem'
+    minHeight: '3rem',
   },
   table: {
     position: 'relative',
     width: '100%',
     maxWidth: '100%',
-    overflowX: 'auto'
+    overflowX: 'auto',
   },
   tableHeaderRow: {
     boxShadow: 'none !important',
     height: CssSizeVariables.sapWcrAnalyticalTableRowHeight,
-    position: 'relative'
+    position: 'relative',
   },
   th: {
     backgroundColor: ThemingParameters.sapList_HeaderBackground,
@@ -31,55 +31,59 @@ const styles = {
     textAlign: 'start',
     boxSizing: 'border-box',
     '&:first-child': {
-      borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`
-    }
+      borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`,
+    },
   },
   tbody: {
     position: 'relative',
     zIndex: 0,
     backgroundColor: ThemingParameters.sapList_Background,
     overflowX: 'hidden !important',
-    overflowY: 'auto !important'
+    overflowY: 'auto !important',
   },
   alternateRowColor: {
-    backgroundColor: ThemingParameters.sapList_HeaderBackground
+    backgroundColor: ThemingParameters.sapList_HeaderBackground,
   },
   emptyRow: {},
   tr: {
     zIndex: 0,
     color: ThemingParameters.sapList_TextColor,
+    boxSizing: 'border-box',
     '&[data-is-selected]': {
-      backgroundColor: `${ThemingParameters.sapList_SelectionBackgroundColor} !important`
+      backgroundColor: `${ThemingParameters.sapList_SelectionBackgroundColor} !important`,
+      '& $tableCell': {
+        borderBottom: `1px solid ${ThemingParameters.sapList_SelectionBorderColor}`,
+      },
     },
     '&[data-is-selected]:hover': {
-      backgroundColor: `${ThemingParameters.sapList_Hover_SelectionBackground} !important`
-    }
+      backgroundColor: `${ThemingParameters.sapList_Hover_SelectionBackground} !important`,
+    },
   },
   tableGroupHeader: {
     '&$tr': {
       backgroundColor: `${ThemingParameters.sapList_TableGroupHeaderBackground} !important`,
       border: `1px solid ${ThemingParameters.sapList_TableGroupHeaderBorderColor}`,
       color: ThemingParameters.sapList_TextColor,
       '& $tableCell': {
-        borderRight: 'none'
-      }
-    }
+        borderRight: 'none',
+      },
+    },
   },
   selectable: {
     '& $tr:hover:not($emptyRow)': {
       backgroundColor: ThemingParameters.sapList_Hover_Background,
       '&:not($selectionModeRowSelector)': {
-        cursor: 'pointer'
-      }
+        cursor: 'pointer',
+      },
     },
     '& $tr:active:not([data-is-selected]):not($tableGroupHeader):not($emptyRow):not($selectionModeRowSelector)': {
       backgroundColor: ThemingParameters.sapList_Active_Background,
       '& $tableCell': {
         borderRight: `1px solid ${ThemingParameters.sapList_Active_Background}`,
         color: `${ThemingParameters.sapList_Active_TextColor}`,
-        '--sapTextColor': ThemingParameters.sapList_Active_TextColor
-      }
-    }
+        '--sapTextColor': ThemingParameters.sapList_Active_TextColor,
+      },
+    },
   },
   selectionModeRowSelector: {},
   tableCell: {
@@ -93,7 +97,7 @@ const styles = {
     display: 'flex',
     padding: '0 0.5rem',
     '&:first-child': {
-      borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`
+      borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`,
     },
     overflow: 'hidden',
     position: 'relative',
@@ -102,8 +106,8 @@ const styles = {
     alignItems: 'center',
     '&:focus': {
       outlineOffset: '-2px',
-      outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}`
-    }
+      outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}`,
+    },
   },
   noDataContainer: {
     display: 'flex',
@@ -117,13 +121,13 @@ const styles = {
     fontFamily: ThemingParameters.sapFontFamily,
     fontSize: ThemingParameters.sapFontSize,
     fontWeight: 'normal',
-    borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`
+    borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`,
   },
   modifiedRowHeight: {
     '& $tableCell': {
-      height: (props) => `${props.rowHeight}px`
-    }
-  }
+      height: (props) => `${props.rowHeight}px`,
+    },
+  },
 };
 
 export default styles;