Merge pull request #828 from buildo/fixes_to_table

Change style of sticky columns padding when using dividers
buildo · Feb 21, 2024 · 0b034f2 · 0b034f2
2 parents fd64e19 + 35eaaf6
commit 0b034f2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git 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
@@ -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={[