Merge pull request #823 from buildo/add-table-column-dividers

federico-ercoles · web-flow · commit c715851e3ee2 · 2024-01-16T17:22:24.000+01:00
Add vertical dividers to Table columns
diff --git a/packages/bento-design-system/src/Table/Config.ts b/packages/bento-design-system/src/Table/Config.ts
@@ -37,4 +37,5 @@ export type TableConfig = {
     iconButtonCell: CellPaddingConfig | undefined;
   };
   boundaryPadding: BentoSprinkles["padding"];
+  columnDividers: boolean;
 };
diff --git a/packages/bento-design-system/src/Table/Table.css.ts b/packages/bento-design-system/src/Table/Table.css.ts
@@ -14,25 +14,133 @@ export const lastLeftStickyColumn = bentoSprinkles({
   paddingRight: 8,
 });
 
-export const columnHeader = bentoSprinkles({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  boxShadow: "outlineDecorativeBottom",
-  height: "full",
+export const columnHeader = strictRecipe({
+  base: bentoSprinkles({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    height: "full",
+  }),
+  variants: {
+    withDividers: {
+      false: bentoSprinkles({
+        boxShadow: "outlineDecorativeBottom",
+      }),
+    },
+    first: {
+      true: {},
+    },
+    lastLeftSticky: {
+      true: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        withDividers: true,
+        first: true,
+        lastLeftSticky: false,
+      },
+      style: bentoSprinkles({
+        boxShadow: "outlineDecorativeBottom",
+      }),
+    },
+    {
+      variants: {
+        withDividers: true,
+        first: true,
+        lastLeftSticky: true,
+      },
+      style: style({
+        boxShadow: `inset -1px -1px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+    {
+      variants: {
+        withDividers: true,
+        first: false,
+        lastLeftSticky: false,
+      },
+      style: style({
+        boxShadow: `inset 1px -1px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+    {
+      variants: {
+        withDividers: true,
+        first: false,
+        lastLeftSticky: true,
+      },
+      style: style({
+        boxShadow: `inset 1px -1px ${vars.outlineColor.outlineDecorative}, inset -1px -1px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+  ],
 });
 
-export const columnFooter = style([
-  {
-    boxShadow: `inset 0px 1px 0px ${vars.outlineColor.outlineDecorative}`,
-  },
-  bentoSprinkles({
+export const columnFooter = strictRecipe({
+  base: bentoSprinkles({
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
     height: "full",
   }),
-]);
+  variants: {
+    withDividers: {
+      false: style({
+        boxShadow: `inset 0px 1px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+    first: {
+      true: {},
+    },
+    lastLeftSticky: {
+      true: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        withDividers: true,
+        first: true,
+        lastLeftSticky: false,
+      },
+      style: style({
+        boxShadow: `inset 0px 1px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+    {
+      variants: {
+        withDividers: true,
+        first: true,
+        lastLeftSticky: true,
+      },
+      style: style({
+        boxShadow: `inset -1px 1px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+    {
+      variants: {
+        withDividers: true,
+        first: false,
+        lastLeftSticky: false,
+      },
+      style: style({
+        boxShadow: `inset 1px 1px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+    {
+      variants: {
+        withDividers: true,
+        first: false,
+        lastLeftSticky: true,
+      },
+      style: style({
+        boxShadow: `inset 1px 1px ${vars.outlineColor.outlineDecorative}, inset -1px 1px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+  ],
+});
 
 export const sortIconContainer = style({
   filter: "opacity(80%)",
@@ -88,16 +196,11 @@ export const cellContainerRecipe = strictRecipe({
   },
 });
 
-export const sectionHeaderContainer = style([
-  {
-    zIndex: 1,
-  },
-  bentoSprinkles({
-    position: "sticky",
-    left: 0,
-    background: "backgroundPrimary",
-  }),
-]);
+export const sectionHeaderContainer = bentoSprinkles({
+  position: "sticky",
+  left: 0,
+  background: "backgroundPrimary",
+});
 
 export const sectionHeader = bentoSprinkles({
   display: "inline-block",
@@ -106,3 +209,46 @@ export const sectionHeader = bentoSprinkles({
   paddingX: 24,
   paddingY: 4,
 });
+
+export const cellColumnDivider = strictRecipe({
+  base: style({
+    boxShadow: `inset 1px 0px 0px ${vars.outlineColor.outlineDecorative}`,
+  }),
+  variants: {
+    first: {
+      true: {},
+    },
+    lastLeftSticky: {
+      true: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        first: true,
+        lastLeftSticky: true,
+      },
+      style: style({
+        boxShadow: `inset -1px 0px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+    {
+      variants: {
+        first: false,
+        lastLeftSticky: true,
+      },
+      style: style({
+        boxShadow: `inset 1px 0px ${vars.outlineColor.outlineDecorative}, inset -1px 0px ${vars.outlineColor.outlineDecorative}`,
+      }),
+    },
+    {
+      variants: {
+        first: true,
+        lastLeftSticky: false,
+      },
+      style: style({
+        boxShadow: "none",
+      }),
+    },
+  ],
+});
diff --git a/packages/bento-design-system/src/Table/Table.tsx b/packages/bento-design-system/src/Table/Table.tsx
@@ -30,6 +30,7 @@ import {
   vars,
 } from "..";
 import {
+  cellColumnDivider,
   cellContainerRecipe,
   columnFooter,
   columnHeader,
@@ -110,6 +111,7 @@ type Props<
   height?: { custom: string | number };
   onRowPress?: (row: Row<RowType<C>>) => void;
   virtualizeRows?: boolean | { estimateRowHeight: (index: number) => number };
+  columnDividers?: boolean;
 } & SortingProps<C>;
 
 /**
@@ -150,6 +152,7 @@ export function Table<
   height,
   onRowPress,
   virtualizeRows: virtualizeRowsConfig,
+  columnDividers,
 }: Props<C>) {
   const config = useBentoConfig().table;
   const customOrderByFn = useMemo(
@@ -367,6 +370,8 @@ export function Table<
     .map(({ gridWidth = "fit-content" }) => gridWidthStyle(gridWidth))
     .join(" ");
 
+  const withDividers = columnDividers ?? config.columnDividers;
+
   function renderCells<D extends Record<string, unknown>>(
     cells: Array<Cell<D>>,
     rowIndex: number,
@@ -381,6 +386,7 @@ export function Table<
         first={index === 0}
         last={(index + 1) % flatColumns.length === 0}
         interactiveRow={interactiveRow}
+        withDividers={withDividers}
       >
         {cell.render("Cell")}
       </CellContainer>
@@ -459,6 +465,7 @@ export function Table<
             }
             first={index === 0}
             last={index + 1 === flatColumns.length}
+            withDividers={withDividers}
           />
         ))
       )}
@@ -482,6 +489,7 @@ export function Table<
             sticky={stickyLeftColumnsIds.includes(header.id)}
             first={index === 0}
             last={index + 1 === flatColumns.length}
+            withDividers={withDividers}
           />
         ))}
     </Box>
@@ -523,6 +531,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
   sticky,
   first,
   last,
+  withDividers,
 }: {
   column: ColumnInstance<D> | HeaderGroup<D>;
   style: CSSProperties;
@@ -531,6 +540,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
   sticky: boolean;
   first: boolean;
   last: boolean;
+  withDividers: boolean;
 }) {
   const config = useBentoConfig().table;
 
@@ -584,7 +594,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
       }}
     >
       <Box
-        className={columnHeader}
+        className={[columnHeader({ withDividers, first, lastLeftSticky })]}
         background={config.headerBackgroundColor}
         color={config.headerForegroundColor}
         {...column.getHeaderProps(column.getSortByToggleProps())}
@@ -626,6 +636,7 @@ function ColumnFooter<D extends Record<string, unknown>>({
   sticky,
   first,
   last,
+  withDividers,
 }: {
   column: ColumnInstance<D> | HeaderGroup<D>;
   style: CSSProperties;
@@ -634,6 +645,7 @@ function ColumnFooter<D extends Record<string, unknown>>({
   sticky: boolean;
   first: boolean;
   last: boolean;
+  withDividers: boolean;
 }) {
   const config = useBentoConfig().table;
 
@@ -646,7 +658,7 @@ function ColumnFooter<D extends Record<string, unknown>>({
       }}
     >
       <Box
-        className={columnFooter}
+        className={columnFooter({ withDividers, first, lastLeftSticky })}
         background={config.footerBackgroundColor}
         color={config.footerForegroundColor}
         {...column.getFooterProps()}
@@ -696,6 +708,7 @@ function SectionHeader({
       <Box
         className={sectionHeaderContainer}
         style={{
+          zIndex: numberOfStickyColumns > 0 ? 1 : undefined,
           gridColumn: `1 / ${numberOfStickyColumns > 0 ? numberOfStickyColumns + 1 : -1}`,
         }}
       >
@@ -723,6 +736,7 @@ function CellContainer({
   first,
   last,
   interactiveRow,
+  withDividers,
   ...props
 }: {
   children: any;
@@ -732,14 +746,18 @@ function CellContainer({
   first: boolean;
   last: boolean;
   interactiveRow: boolean;
+  withDividers: boolean;
 } & TableCellProps) {
   const tableConfig = useBentoConfig().table;
 
   return (
     <Box className={lastLeftSticky && lastLeftStickyColumn} style={style}>
       <Box
         background={index % 2 === 0 ? tableConfig.evenRowsBackgroundColor : "backgroundPrimary"}
-        className={cellContainerRecipe({ interactiveRow })}
+        className={[
+          cellContainerRecipe({ interactiveRow }),
+          withDividers && cellColumnDivider({ first, lastLeftSticky }),
+        ]}
         paddingLeft={first ? tableConfig.boundaryPadding : undefined}
         paddingRight={last ? tableConfig.boundaryPadding : undefined}
         {...props}
@@ -758,7 +776,11 @@ export type {
   Row as TableRow,
 } from "react-table";
 
-export type { Column as SimpleColumnType, Row as RowType } from "./types";
+export type {
+  Column as SimpleColumnType,
+  GroupedColumn as GroupedColumnType,
+  Row as RowType,
+} from "./types";
 
 export type { ColumnOptionsBase } from "./tableColumn";
 export type { Props as TableProps };
diff --git a/packages/bento-design-system/src/util/defaultConfigs.tsx b/packages/bento-design-system/src/util/defaultConfigs.tsx
@@ -527,6 +527,7 @@ export const table: TableConfig = {
     iconButtonCell: { paddingX: 16, paddingY: 16 },
   },
   boundaryPadding: 8,
+  columnDividers: false,
 };
 
 export const toast: ToastConfig = {
diff --git a/packages/bento-design-system/stories/Components/Table.stories.tsx b/packages/bento-design-system/stories/Components/Table.stories.tsx
