fix: restore default collapseAt for <Columns> (#3827)

* fix: restore default `collapseAt` for `<Columns>` (also use positive comparison :D) * Create wicked-experts-provide.md * update snapshots
marigold-ui · Mar 14, 2024 · 95ce246 · 95ce246
1 parent f996764
commit 95ce246
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/.changeset/wicked-experts-provide.md b/.changeset/wicked-experts-provide.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix: restore default `collapseAt` for `<Columns>`
diff --git a/packages/components/src/Columns/Columns.test.tsx b/packages/components/src/Columns/Columns.test.tsx
@@ -20,15 +20,15 @@ test('supports default space prop', () => {
 >
   <div
     class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-    style="--columnSize: 6;"
+    style="--collapseAt: 0em; --columnSize: 6;"
   >
     <div>
       column
     </div>
   </div>
   <div
     class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-    style="--columnSize: 6;"
+    style="--collapseAt: 0em; --columnSize: 6;"
   >
     <div>
       column
@@ -82,7 +82,7 @@ test('supports columns with two values', () => {
   expect(columnOne).toMatchInlineSnapshot(`
 <div
   class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-  style="--columnSize: 2;"
+  style="--collapseAt: 0em; --columnSize: 2;"
 >
   <div>
     columnOne
@@ -92,7 +92,7 @@ test('supports columns with two values', () => {
   expect(columnTwo).toMatchInlineSnapshot(`
 <div
   class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-  style="--columnSize: 10;"
+  style="--collapseAt: 0em; --columnSize: 10;"
 >
   <div>
     columnTwo
@@ -115,7 +115,7 @@ test('supports columns with three values', () => {
   expect(columnOne).toMatchInlineSnapshot(`
 <div
   class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-  style="--columnSize: 2;"
+  style="--collapseAt: 0em; --columnSize: 2;"
 >
   <div>
     columnOne
@@ -125,7 +125,7 @@ test('supports columns with three values', () => {
   expect(columnTwo).toMatchInlineSnapshot(`
 <div
   class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-  style="--columnSize: 4;"
+  style="--collapseAt: 0em; --columnSize: 4;"
 >
   <div>
     columnTwo
@@ -135,7 +135,7 @@ test('supports columns with three values', () => {
   expect(columnThree).toMatchInlineSnapshot(`
 <div
   class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-  style="--columnSize: 6;"
+  style="--collapseAt: 0em; --columnSize: 6;"
 >
   <div>
     columnThree
@@ -158,7 +158,7 @@ test('supports different types of children', () => {
   expect(columnOne).toMatchInlineSnapshot(`
 <div
   class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-  style="--columnSize: 1;"
+  style="--collapseAt: 0em; --columnSize: 1;"
 >
   <main>
     columnOne
@@ -168,7 +168,7 @@ test('supports different types of children', () => {
   expect(columnTwo).toMatchInlineSnapshot(`
 <div
   class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-  style="--columnSize: 1;"
+  style="--collapseAt: 0em; --columnSize: 1;"
 >
   <div>
     columnTwo
@@ -178,7 +178,7 @@ test('supports different types of children', () => {
   expect(columnThree).toMatchInlineSnapshot(`
 <div
   class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-  style="--columnSize: 2;"
+  style="--collapseAt: 0em; --columnSize: 2;"
 >
   <aside>
     columnThree
@@ -220,23 +220,23 @@ test('supports stretching to full height', () => {
 >
   <div
     class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-    style="--columnSize: 1;"
+    style="--collapseAt: 0em; --columnSize: 1;"
   >
     <main>
       columnOne
     </main>
   </div>
   <div
     class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-    style="--columnSize: 1;"
+    style="--collapseAt: 0em; --columnSize: 1;"
   >
     <div>
       columnTwo
     </div>
   </div>
   <div
     class="flex-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
-    style="--columnSize: 2;"
+    style="--collapseAt: 0em; --columnSize: 2;"
   >
     <aside>
       columnThree

diff --git a/packages/components/src/Columns/Columns.tsx b/packages/components/src/Columns/Columns.tsx
@@ -12,7 +12,7 @@ export interface ColumnsProps extends GapSpaceProp {
 export const Columns = ({
   space = 0,
   columns,
-  collapseAt,
+  collapseAt = '0em',
   stretch,
   children,
   ...props
@@ -37,7 +37,7 @@ export const Columns = ({
       {Children.map(children, (child, idx) => (
         <div
           className={cn(
-            columns[idx] !== 'fit' ? 'flex-[--columnSize]' : 'flex h-fit w-fit',
+            columns[idx] === 'fit' ? 'flex h-fit w-fit' : 'flex-[--columnSize]',
             'basis-[calc((var(--collapseAt)_-_100%)_*_999)]'
           )}
           style={createVar({