Skip to content

Commit 83e3a18

Browse files
vishwapriyavishwapriya
committed
fix(Grid): [BLA-1208] Adds logic to handle the overflowing columns
1 parent e9bad67 commit 83e3a18

File tree

7 files changed

+164
-12
lines changed

7 files changed

+164
-12
lines changed

‎packages/core-components/__snapshots__/components-utilities-grid--story-010-grid.png

472 Bytes
Loading

‎packages/core-components/src/components.d.ts

+8
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,10 @@ export namespace Components {
349349
* Default date picker date
350350
*/
351351
"preSelectedDate": string;
352+
/**
353+
* Adds an asterisk at the end of the label to signify that the field is required.
354+
*/
355+
"required": boolean;
352356
/**
353357
* Whether to show hint message or not.
354358
*/
@@ -2794,6 +2798,10 @@ declare namespace LocalJSX {
27942798
* Default date picker date
27952799
*/
27962800
"preSelectedDate"?: string;
2801+
/**
2802+
* Adds an asterisk at the end of the label to signify that the field is required.
2803+
*/
2804+
"required"?: boolean;
27972805
/**
27982806
* Whether to show hint message or not.
27992807
*/

‎packages/core-components/src/components/grid/row.tsx

+102-11
Original file line numberDiff line numberDiff line change
@@ -30,39 +30,130 @@ export class B2bGridRowComponent {
3030
this.adjustColumnFlex();
3131
}
3232

33+
private calculateRowsAndsSpaceForColumnsWithSpan(
34+
columns: HTMLElement[],
35+
currentRowTotal: number,
36+
rows: HTMLElement[][],
37+
currentRow: HTMLElement[],
38+
) {
39+
columns.forEach(column => {
40+
let span = parseInt(column.getAttribute('span'), 10);
41+
42+
if (currentRowTotal + span > 12) {
43+
rows.push(currentRow);
44+
currentRow = [];
45+
currentRowTotal = 0;
46+
}
47+
48+
currentRow.push(column);
49+
currentRowTotal += span;
50+
});
51+
52+
if (currentRow.length > 0) {
53+
rows.push(currentRow);
54+
}
55+
}
56+
3357
private adjustColumnFlex() {
3458
const columns = this.hostElement.querySelectorAll(':scope > b2b-grid-col');
3559
let totalSpan = 0;
3660
let columnsWithoutSpan: HTMLElement[] = [];
61+
let columnsWithSpan: HTMLElement[] = [];
3762

3863
columns.forEach((column: any) => {
3964
const span = column.getAttribute('span');
4065
if (span) {
4166
totalSpan += parseInt(span, 10);
67+
columnsWithSpan.push(column);
4268
} else {
4369
columnsWithoutSpan.push(column);
4470
}
4571
});
4672

47-
const remainingSpan = 12 - totalSpan;
48-
49-
if (remainingSpan == 0) {
50-
columnsWithoutSpan.forEach(column => {
51-
column.style.width = '100%';
52-
});
73+
if (totalSpan > 12 && columnsWithoutSpan.length === 0) {
74+
this.handleOverflowingColumns(columnsWithSpan);
5375
return;
5476
}
5577

5678
if (columnsWithoutSpan.length > 0) {
57-
const spanPerColumn = Math.floor(
58-
remainingSpan / columnsWithoutSpan.length,
79+
this.handleRowsWithColumnsWithoutSpan(
80+
columnsWithoutSpan,
81+
columnsWithSpan,
82+
totalSpan,
5983
);
84+
return;
85+
}
86+
}
87+
88+
private handleOverflowingColumns(columns: HTMLElement[]) {
89+
let rows: HTMLElement[][] = [];
90+
let currentRow: HTMLElement[] = [];
91+
let currentRowTotal = 0;
92+
this.calculateRowsAndsSpaceForColumnsWithSpan(
93+
columns,
94+
currentRowTotal,
95+
rows,
96+
currentRow,
97+
);
98+
99+
rows.forEach(row => {
100+
row.forEach(column => {
101+
let span = parseInt(column.getAttribute('span'), 10);
102+
let widthPercentage = (span / 12) * 100;
60103

61-
columnsWithoutSpan.forEach(column => {
62-
column.setAttribute('span', spanPerColumn.toString());
63-
column.style.width = `${(spanPerColumn / 12) * 100}%`;
104+
column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
105+
column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
64106
});
107+
});
108+
}
109+
110+
private handleRowsWithColumnsWithoutSpan(
111+
columnsWithoutSpan: HTMLElement[],
112+
columnsWithSpan: HTMLElement[],
113+
totalSpan: number,
114+
) {
115+
let remainingSpan = 12 - totalSpan <= 0 ? 12 : 12 - totalSpan;
116+
let rows: HTMLElement[][] = [];
117+
let currentRow: HTMLElement[] = [];
118+
let currentRowTotal = 0;
119+
120+
this.calculateRowsAndsSpaceForColumnsWithSpan(
121+
columnsWithSpan,
122+
currentRowTotal,
123+
rows,
124+
currentRow,
125+
);
126+
127+
columnsWithoutSpan.forEach(column => {
128+
let spanPerColumn = Math.max(
129+
1,
130+
Math.floor(remainingSpan / columnsWithoutSpan.length),
131+
);
132+
133+
if (currentRowTotal + spanPerColumn > 12) {
134+
rows.push(currentRow);
135+
currentRow = [];
136+
currentRowTotal = 0;
137+
}
138+
139+
column.setAttribute('span', spanPerColumn.toString());
140+
currentRow.push(column);
141+
currentRowTotal += spanPerColumn;
142+
});
143+
144+
if (currentRow.length > 0) {
145+
rows.push(currentRow);
65146
}
147+
148+
rows.forEach(row => {
149+
row.forEach(column => {
150+
let span = parseInt(column.getAttribute('span'), 10) || 1;
151+
let widthPercentage = (span / 12) * 100;
152+
153+
column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
154+
column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
155+
});
156+
});
66157
}
67158

68159
render() {

‎packages/core-components/src/components/input-label/readme.md

+2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
- [b2b-checkbox](../checkbox)
2121
- [b2b-checkbox-group](../checkbox-group)
22+
- [b2b-date-picker](../date-picker)
2223
- [b2b-dropdown](../dropdown)
2324
- [b2b-input](../input)
2425
- [b2b-multiselect-dropdown](../multiselect-dropdown)
@@ -31,6 +32,7 @@
3132
graph TD;
3233
b2b-checkbox --> b2b-input-label
3334
b2b-checkbox-group --> b2b-input-label
35+
b2b-date-picker --> b2b-input-label
3436
b2b-dropdown --> b2b-input-label
3537
b2b-input --> b2b-input-label
3638
b2b-multiselect-dropdown --> b2b-input-label

‎packages/core-components/src/components/toggle-chip/toggle-chip.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
background-color: var(--b2b-color-black-100);
7575
border: 1px solid var(--b2b-color-black-100);
7676
color: var(--b2b-color-grey-300);
77-
77+
7878
&:hover {
7979
cursor: default;
8080
background-color: var(--b2b-color-black-100);

‎packages/core-components/src/docs/config/components-args.json

+14
Original file line numberDiff line numberDiff line change
@@ -989,6 +989,20 @@
989989
},
990990
"description": "Default date picker date"
991991
},
992+
"required": {
993+
"control": {
994+
"type": "boolean"
995+
},
996+
"table": {
997+
"type": {
998+
"summary": "boolean"
999+
},
1000+
"defaultValue": {
1001+
"summary": "false"
1002+
}
1003+
},
1004+
"description": "Adds an asterisk at the end of the label to signify that the field is required."
1005+
},
9921006
"showHint": {
9931007
"control": {
9941008
"type": "boolean"

‎packages/core-components/src/html/utilities.html

+37
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,43 @@ <h1>Grid Component</h1>
247247
<b2b-grid-col><div class="grid-test-box"></div></b2b-grid-col>
248248
</b2b-grid-row>
249249
</b2b-grid>
250+
<div>
251+
<h1>Bug: Grid with column width issue</h1>
252+
<div>
253+
<b2b-grid margin="0">
254+
<b2b-grid-row row-gap="0">
255+
<b2b-grid-col span="3">
256+
<b2b-card>hello1</b2b-card>
257+
</b2b-grid-col>
258+
<b2b-grid-col span="3">
259+
<b2b-card>hello2</b2b-card>
260+
</b2b-grid-col>
261+
<b2b-grid-col span="3">
262+
<b2b-card>hello3</b2b-card>
263+
</b2b-grid-col>
264+
<b2b-grid-col span="3">
265+
<b2b-card>hello4</b2b-card>
266+
</b2b-grid-col>
267+
<b2b-grid-col span="3">
268+
<b2b-card>hello5</b2b-card>
269+
</b2b-grid-col>
270+
<b2b-grid-col span="3">
271+
<b2b-card>hello5</b2b-card>
272+
</b2b-grid-col>
273+
<b2b-grid-col span="3">
274+
<b2b-card>hello5</b2b-card>
275+
</b2b-grid-col>
276+
<b2b-grid-col span="3">
277+
<b2b-card>hello5</b2b-card>
278+
</b2b-grid-col>
279+
<b2b-grid-col>
280+
<b2b-card>hello5</b2b-card>
281+
</b2b-grid-col>
282+
</b2b-grid-row>
283+
</b2b-grid>
284+
</div>
285+
<br /><br /><br />
286+
</div>
250287
</div>
251288
<b2b-background-box max-width="true" no-padding="false">
252289
<h1>Background box with grid and card</h1>

0 commit comments

Comments
 (0)