streamlit
diff --git a/‎e2e/scripts/st_columns.py‎
Lines changed: 16 additions & 0 deletions b/‎e2e/scripts/st_columns.py‎
Lines changed: 16 additions & 0 deletions
diff --git a/‎e2e/specs/st_columns.spec.js‎
Lines changed: 17 additions & 1 deletion b/‎e2e/specs/st_columns.spec.js‎
Lines changed: 17 additions & 1 deletion
diff --git a/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-large-gap-dark.snap.png‎
92.8 KB b/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-large-gap-dark.snap.png‎
92.8 KB
diff --git a/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-large-gap.snap.png‎
92.7 KB b/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-large-gap.snap.png‎
92.7 KB
diff --git a/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-medium-gap-dark.snap.png‎
110 KB b/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-medium-gap-dark.snap.png‎
110 KB
diff --git a/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-medium-gap.snap.png‎
110 KB b/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-medium-gap.snap.png‎
110 KB
diff --git a/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-small-gap-dark.snap.png‎
119 KB b/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-small-gap-dark.snap.png‎
119 KB
diff --git a/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-small-gap.snap.png‎
118 KB b/‎frontend/cypress/snapshots/linux/2x/st_columns.spec.js/columns-small-gap.snap.png‎
118 KB
diff --git a/‎frontend/src/components/core/Block/Block.test.tsx‎
Lines changed: 1 addition & 1 deletion b/‎frontend/src/components/core/Block/Block.test.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎frontend/src/components/core/Block/Block.tsx‎
Lines changed: 4 additions & 1 deletion b/‎frontend/src/components/core/Block/Block.tsx‎
Lines changed: 4 additions & 1 deletion
@@ -29,3 +29,19 @@
 # Variable-width columns
 for c in st.columns((1, 2, 3, 4)):
     c.image(CAT_IMAGE)
+
+# Various column gaps
+c4, c5, c6 = st.columns(3, gap="small")
+c4.image(CAT_IMAGE)
+c5.image(CAT_IMAGE)
+c6.image(CAT_IMAGE)
+
+c7, c8, c9 = st.columns(3, gap="medium")
+c7.image(CAT_IMAGE)
+c8.image(CAT_IMAGE)
+c9.image(CAT_IMAGE)
+
+c10, c11, c12 = st.columns(3, gap="large")
+c10.image(CAT_IMAGE)
+c11.image(CAT_IMAGE)
+c12.image(CAT_IMAGE)
@@ -61,7 +61,7 @@ describe("st.column", () => {
     // This assertion ensures that the report rerun completes first
     cy.get("[data-testid='stHorizontalBlock'] [data-testid='column']").should(
       "have.length",
-      7
+      16
     );
 
     // When layout was shifting, there was an old "flex: 8" block here.
@@ -70,4 +70,20 @@ describe("st.column", () => {
       3
     ).should("have.css", "flex", "1 1 calc(10% - 16px)");
   });
+
+  it("creates small gap between columns", () => {
+    cy.getIndexed("[data-testid='stHorizontalBlock']",
+    2).matchThemedSnapshots("columns-small-gap");
+  });
+
+  it("creates medium gap between columns", () => {
+    cy.getIndexed("[data-testid='stHorizontalBlock']",
+    3).matchThemedSnapshots("columns-medium-gap");
+  });
+
+  it("creates large gap between columns", () => {
+    cy.getIndexed("[data-testid='stHorizontalBlock']",
+    4).matchThemedSnapshots("columns-large-gap");
+  });
+
 });
@@ -35,7 +35,7 @@ function makeHorizontalBlock(numColumns: number): BlockNode {
 
   return new BlockNode(
     Array.from({ length: numColumns }, () => makeColumn(weight)),
-    new BlockProto({ allowEmpty: true, horizontal: true })
+    new BlockProto({ allowEmpty: true, horizontal: { gap: "small" } })
   )
 }
 
 
@@ -106,6 +106,7 @@ const BlockNodeRenderer = (props: BlockPropsWithWidth): ReactElement => {
     return (
       <StyledColumn
         weight={node.deltaBlock.column.weight ?? 0}
+        gap={node.deltaBlock.column.gap ?? ""}
         data-testid="column"
       >
         {child}
@@ -179,8 +180,10 @@ const HorizontalBlock = (props: BlockPropsWithWidth): ReactElement => {
   // Create a horizontal block as the parent for columns.
   // The children are always columns, but this is not checked. We just trust the Python side to
   // do the right thing, then we ask ChildRenderer to handle it.
+  const gap = props.node.deltaBlock.horizontal?.gap ?? ""
+
   return (
-    <StyledHorizontalBlock data-testid="stHorizontalBlock">
+    <StyledHorizontalBlock gap={gap} data-testid="stHorizontalBlock">
       <ChildRenderer {...props} />
     </StyledHorizontalBlock>
   )
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ function makeHorizontalBlock(numColumns: number): BlockNode {`
`35`	`35`
`36`	`36`	`return new BlockNode(`
`37`	`37`	`Array.from({ length: numColumns }, () => makeColumn(weight)),`
`38`		`- new BlockProto({ allowEmpty: true, horizontal: true })`
	`38`	`+ new BlockProto({ allowEmpty: true, horizontal: { gap: "small" } })`
`39`	`39`	`)`
`40`	`40`	`}`
`41`	`41`