feat(header updates): remove white border-right from header cell, dis…

…play border-right for each header cell on hover of table header component (#2630)

Co-authored-by: Carlos Cortizas <[email protected]>

.changeset/serious-hornets-remember.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/data-table': minor
+---
+
+Display table header cell border for each cell on hover of table header

packages/components/data-table/src/data-table.styles.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { designTokens } from '@commercetools-uikit/design-system';
 import { RowExpandCollapseButton } from './cell.styles';
+import { BaseHeaderCell } from './header-cell.styles';
 import convertNumericDimensionToPixelValue from './utils/convert-numeric-dimension-to-pixel-value';
 import type { TDataTableProps } from './data-table';
 
@@ -103,6 +104,23 @@ const TableGrid = styled.table<TTableGrid>`
 
 const TableHeader = styled.thead`
   display: contents;
+  /* Adds right border that doesn't affect column width
+  *  to each header cell when table header is hovered
+  */
+  :hover {
+    ${BaseHeaderCell}:before {
+      content: '';
+      position: absolute;
+      border-right: 1px solid ${designTokens.colorNeutral};
+      top: ${designTokens.spacing20};
+      right: 0;
+      bottom: ${designTokens.spacing20};
+    }
+    /* Does not display border on far right (last) header cell */
+    ${BaseHeaderCell}:last-child:before {
+      display: none;
+    }
+  }
 `;
 
 const TableBody = styled.tbody`

packages/components/data-table/src/header-cell.styles.tsx

@@ -103,9 +103,6 @@ const BaseHeaderCell = styled.th<TBaseHeaderCell>`
   font-weight: ${designTokens.fontWeightForTableHeader};
   font-size: ${designTokens.fontSizeForTable};
 
-  /* right border that doesn't count towards the column width */
-  box-shadow: inset -1px 0 ${designTokens.borderColorForTableHeader};
-
   /* this ensures that, when dragging this header's column resizer
   it remains above the rest of the headers, preventing accidental hovers/flickering */
   :hover,