From 35eaaf643150bc0404338d5ac38cd424f27634ba Mon Sep 17 00:00:00 2001
From: Federico Ercoles <federico.ercoles@buildo.io>
Date: Wed, 21 Feb 2024 15:47:58 +0100
Subject: [PATCH] Change style of sticky columns padding when using dividers

---
 .../src/Table/Table.css.ts                    | 20 ++++++++++++++++---
 .../bento-design-system/src/Table/Table.tsx   | 12 ++++++++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/bento-design-system/src/Table/Table.css.ts b/packages/bento-design-system/src/Table/Table.css.ts
index 1a5288cb1..494c5cdfb 100644
--- a/packages/bento-design-system/src/Table/Table.css.ts
+++ b/packages/bento-design-system/src/Table/Table.css.ts
@@ -9,9 +9,23 @@ export const table = style({
   isolation: "isolate",
 });
 
-export const lastLeftStickyColumn = bentoSprinkles({
-  background: "backgroundPrimary",
-  paddingRight: 8,
+export const lastLeftStickyColumn = strictRecipe({
+  variants: {
+    withDividers: {
+      true: style([
+        {
+          paddingRight: 2,
+        },
+        bentoSprinkles({
+          background: "outlineDecorative",
+        }),
+      ]),
+      false: bentoSprinkles({
+        background: "backgroundPrimary",
+        paddingRight: 8,
+      }),
+    },
+  },
 });
 
 export const columnHeader = strictRecipe({
diff --git a/packages/bento-design-system/src/Table/Table.tsx b/packages/bento-design-system/src/Table/Table.tsx
index feb29297f..ace3d2676 100644
--- a/packages/bento-design-system/src/Table/Table.tsx
+++ b/packages/bento-design-system/src/Table/Table.tsx
@@ -585,7 +585,10 @@ function ColumnHeader<D extends Record<string, unknown>>({
 
   return (
     <Box
-      className={[lastLeftSticky && lastLeftStickyColumn, stickyHeaders && stickyColumnHeader]}
+      className={[
+        lastLeftSticky && lastLeftStickyColumn({ withDividers }),
+        stickyHeaders && stickyColumnHeader,
+      ]}
       style={{
         ...style,
         gridColumnEnd: column.columns ? `span ${column.columns.length}` : undefined,
@@ -650,7 +653,10 @@ function ColumnFooter<D extends Record<string, unknown>>({
 
   return (
     <Box
-      className={[lastLeftSticky && lastLeftStickyColumn, stickyFooters && stickyColumnFooter]}
+      className={[
+        lastLeftSticky && lastLeftStickyColumn({ withDividers }),
+        stickyFooters && stickyColumnFooter,
+      ]}
       style={{
         ...style,
         zIndex: sticky ? zIndexes.leftStickyHeader : zIndexes.header,
@@ -750,7 +756,7 @@ function CellContainer({
   const tableConfig = useBentoConfig().table;
 
   return (
-    <Box className={lastLeftSticky && lastLeftStickyColumn} style={style}>
+    <Box className={lastLeftSticky && lastLeftStickyColumn({ withDividers })} style={style}>
       <Box
         background={index % 2 === 0 ? tableConfig.evenRowsBackgroundColor : "backgroundPrimary"}
         className={[