Merge pull request #507 from buildo/table_config_even_rows_background

Allow config of background color for Table's even rows

Author: gabro

packages/bento-design-system/src/Table/Config.ts

@@ -10,4 +10,5 @@ export type TableConfig = {
   headerForegroundColor: BentoSprinkles["color"];
   hintPlacement: TooltipPlacement;
   cellTooltipPlacement: TooltipPlacement;
+  evenRowsBackgroundColor: BentoSprinkles["background"];
 };

packages/bento-design-system/src/Table/Table.css.ts

@@ -56,10 +56,6 @@ export const cellContainerRecipe = strictRecipe({
     justifyContent: "center",
   }),
   variants: {
-    even: {
-      true: bentoSprinkles({ background: "backgroundSecondary" }),
-      false: bentoSprinkles({ background: "backgroundPrimary" }),
-    },
     firstColumn: {
       true: bentoSprinkles({ paddingLeft: 8 }),
     },

packages/bento-design-system/src/Table/Table.tsx

@@ -487,14 +487,12 @@ function CellContainer({
   first: boolean;
   last: boolean;
 } & TableCellProps) {
+  const tableConfig = useBentoConfig().table;
   return (
     <Box className={lastLeftSticky && lastLeftStickyColumn} style={style}>
       <Box
-        className={cellContainerRecipe({
-          even: index % 2 === 0,
-          firstColumn: first,
-          lastColumn: last,
-        })}
+        background={index % 2 === 0 ? tableConfig.evenRowsBackgroundColor : "backgroundPrimary"}
+        className={cellContainerRecipe({ firstColumn: first, lastColumn: last })}
         {...props}
       >
         {children}

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -464,6 +464,7 @@ export const table: TableConfig = {
   headerForegroundColor: undefined,
   hintPlacement: "top",
   cellTooltipPlacement: "bottom",
+  evenRowsBackgroundColor: "backgroundSecondary",
 };
 
 export const toast: ToastConfig = {