fix(Grid): [BLA-1199] Consider only the direct children of the row wh…

…ile calculating span
otto-de · Feb 21, 2025 · 63c952e · 63c952e
1 parent daa0d9a
commit 63c952e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/packages/core-components/src/components/grid/grid.scss b/packages/core-components/src/components/grid/grid.scss
@@ -3,3 +3,17 @@
   margin: 0 auto;
   box-sizing: border-box;
 }
+
+:host(.b2b-grid-row) {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+:host(.b2b-grid-col) {
+  display: flex;
+  flex-direction: column;
+}
+
+.b2b-grid-col > .b2b-grid-row {
+  flex: 1;
+}
diff --git a/packages/core-components/src/components/grid/row.tsx b/packages/core-components/src/components/grid/row.tsx
@@ -31,7 +31,7 @@ export class B2bGridRowComponent {
   }
 
   private adjustColumnFlex() {
-    const columns = this.hostElement.querySelectorAll('b2b-grid-col');
+    const columns = this.hostElement.querySelectorAll(':scope > b2b-grid-col');
     let totalSpan = 0;
     let columnsWithoutSpan: HTMLElement[] = [];
 

diff --git a/packages/core-components/src/html/dev-styles.css b/packages/core-components/src/html/dev-styles.css
@@ -85,6 +85,12 @@ h1 {
   height: 200px;
 }
 
+.grid-test-box--blue {
+  border: 1px solid black;
+  background-color: #78ace0;
+  height: 100%;
+}
+
 .grid-test-box--small {
   border: 1px solid black;
   padding: 0.75rem;

diff --git a/packages/core-components/src/html/utilities.html b/packages/core-components/src/html/utilities.html
@@ -214,6 +214,24 @@ <h1>Grid Component</h1>
           ></b2b-grid-col>
           <b2b-grid-col><div class="grid-test-box"></div></b2b-grid-col>
         </b2b-grid-row>
+        <b2b-grid-row>
+          <b2b-grid-col>
+            <b2b-grid-row>
+              <b2b-grid-col
+                ><div class="grid-test-box--blue"></div
+              ></b2b-grid-col>
+              <b2b-grid-col><div class="grid-test-box"></div></b2b-grid-col>
+            </b2b-grid-row>
+          </b2b-grid-col>
+          <b2b-grid-col>
+            <b2b-grid-row>
+              <b2b-grid-col
+                ><div class="grid-test-box--blue"></div
+              ></b2b-grid-col>
+              <b2b-grid-col><div class="grid-test-box"></div></b2b-grid-col>
+            </b2b-grid-row>
+          </b2b-grid-col>
+        </b2b-grid-row>
       </b2b-grid>
     </div>
     <b2b-background-box fixed-width="true" no-padding="false">