Fix Columns layout to respect space between columns

buildo · Mar 15, 2024 · 45b0ff0 · 45b0ff0
1 parent ba85e0b
commit 45b0ff0
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 7 deletions.
diff --git a/packages/bento-design-system/src/Layout/Column.css.ts b/packages/bento-design-system/src/Layout/Column.css.ts
@@ -1,7 +1,17 @@
-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 columns = style({
+  marginLeft: `calc(${columnsSpace} * -1)`,
+});
+
+export const columnContent = style({
+  marginLeft: columnsSpace,
+});
+
 const styleForScale = (scale: number): StyleRule => ({
   flex: `0 0 ${scale * 100}%`,
   width: "100%",

diff --git a/packages/bento-design-system/src/Layout/Columns.tsx b/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,
+  columns,
+  columnContent,
+} from "./Column.css";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 
 type ColumnProps = {
   children: Children;
@@ -38,7 +48,7 @@ export function Column({ children, width, sticky }: ColumnProps) {
 
   return (
     <Box className={className} {...stickyProps}>
-      {children}
+      <Box className={columnContent}>{children}</Box>
     </Box>
   );
 }
@@ -52,8 +62,9 @@ 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` })}
+      className={columns}
     >
       {flattenChildren(children).map((child, index) => {
         if (isColumn(child)) {

diff --git a/packages/bento-design-system/stories/Layout/Columns.stories.tsx b/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>
+  );
+};