Fix Columns layout to respect space between columns

Author: veej

packages/bento-design-system/src/Layout/Column.css.ts

@@ -1,7 +1,20 @@
-import { StyleRule, styleVariants } from "@vanilla-extract/css";
+import { StyleRule, createVar, style, styleVariants } from "@vanilla-extract/css";
 import { bentoSprinkles } from "../internal/sprinkles.css";
 import { Breakpoint, breakpoints } from "../util/breakpoints";
 
+export const columnsSpace = createVar("columns-space");
+
+export const column = style({});
+
+export const columnContent = style({
+  marginLeft: columnsSpace,
+  selectors: {
+    [`${column}:first-child &`]: {
+      marginLeft: 0,
+    },
+  },
+});
+
 const styleForScale = (scale: number): StyleRule => ({
   flex: `0 0 ${scale * 100}%`,
   width: "100%",

packages/bento-design-system/src/Layout/Columns.tsx

@@ -9,7 +9,17 @@ import {
   CollapsibleAlignmentProps,
   responsiveCollapsibleAlignmentProps,
 } from "../util/collapsible";
-import { wideWidths, desktopWidths, tabletWidths, mobileWidths, fullWidth } from "./Column.css";
+import {
+  wideWidths,
+  desktopWidths,
+  tabletWidths,
+  mobileWidths,
+  fullWidth,
+  columnsSpace,
+  column,
+  columnContent,
+} from "./Column.css";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 
 type ColumnProps = {
   children: Children;
@@ -26,8 +36,9 @@ export function Column({ children, width, sticky }: ColumnProps) {
 
   const className =
     width == null
-      ? fullWidth
+      ? [column, fullWidth]
       : [
+          column,
           wide && wideWidths[wide],
           desktop && desktopWidths[desktop],
           tablet && tabletWidths[tablet],
@@ -38,7 +49,7 @@ export function Column({ children, width, sticky }: ColumnProps) {
 
   return (
     <Box className={className} {...stickyProps}>
-      {children}
+      <Box className={columnContent}>{children}</Box>
     </Box>
   );
 }
@@ -52,8 +63,8 @@ export function Columns({ space, children, align, alignY, collapseBelow, reverse
   return (
     <Box
       display="flex"
-      gap={space}
       {...responsiveCollapsibleAlignmentProps({ align, alignY, collapseBelow, reverse })}
+      style={assignInlineVars({ [columnsSpace]: `${space}px` })}
     >
       {flattenChildren(children).map((child, index) => {
         if (isColumn(child)) {

packages/bento-design-system/stories/Layout/Columns.stories.tsx

@@ -1,4 +1,4 @@
-import { Card, Column, Columns, Display, Placeholder } from "..";
+import { Card, Column, Columns, Display, Placeholder, Stack } from "..";
 import { alignArgType, alignYArgType, disableControlArgType, spaceArgType } from "../util";
 import { Meta, StoryObj } from "@storybook/react";
 
@@ -37,7 +37,7 @@ export const TwoColumn1_3 = {
         <Column width="1/3">
           <Placeholder height={200} label="1/3" />
         </Column>
-        <Column>
+        <Column width="1/3">
           <Placeholder height={200} />
         </Column>
       </>
@@ -51,7 +51,7 @@ export const ThreeColumn = {
       <Column width="1/5">
         <Placeholder height={200} label="1/5" />
       </Column>,
-      <Column>
+      <Column width="3/5">
         <Placeholder height={200} />
       </Column>,
       <Column width="1/5">
@@ -164,3 +164,40 @@ export const Sticky = {
   },
   parameters: { viewport: { defaultViewport: "mobile1" } },
 } satisfies Story;
+
+export const MultipleRowsLayout = () => {
+  return (
+    <Stack space={16}>
+      <Columns space={16}>
+        <Column width="1/3">
+          <Placeholder height={200} label="1/3" />
+        </Column>
+        <Column width="2/3">
+          <Placeholder height={200} label="2/3" />
+        </Column>
+      </Columns>
+      <Columns space={16}>
+        <Column width="1/3">
+          <Placeholder height={200} label="1/3" />
+        </Column>
+        <Column width="1/3">
+          <Placeholder height={200} label="1/3" />
+        </Column>
+      </Columns>
+      <Columns space={16}>
+        <Column width="1/3">
+          <Placeholder height={200} label="1/3" />
+        </Column>
+        <Placeholder height={200} label="auto" />
+      </Columns>
+      <Columns space={16}>
+        <Column width="1/3">
+          <Placeholder height={200} label="1/3" />
+        </Column>
+        <Column width="content">
+          <Placeholder height={200} width={150} label="150px" />
+        </Column>
+      </Columns>
+    </Stack>
+  );
+};