Skip to content

Commit ba16c35

Browse files
MarcusNotheisMarcusNotheis
committed
fix: alignment with multiple columns and labelSpan 12
1 parent 3109a28 commit ba16c35

File tree

2 files changed

+114
-52
lines changed

2 files changed

+114
-52
lines changed

‎packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap

Lines changed: 57 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
exports[`Create a Form should use a single FormGroup's title as a Form title if one is not set 1`] = `
44
<div
55
class="Form-form-0"
6-
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4; --ui5wcr_form_full_span: span 24; grid-template-columns: repeat(24, 1fr);"
6+
data-columns="2"
7+
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4;"
78
>
89
<ui5-title
910
class="Form-formTitle-0"
@@ -13,13 +14,14 @@ exports[`Create a Form should use a single FormGroup's title as a Form title if
1314
</ui5-title>
1415
<ui5-label
1516
class="FormItem-label-0"
16-
style="grid-column-start: 1;"
17+
style="grid-column-start: 1; grid-row-start: 0;"
1718
wrap="true"
1819
>
1920
item 1:
2021
</ui5-label>
2122
<div
2223
class="FormItem-content-0"
24+
style="grid-row-start: 0;"
2325
>
2426
<ui5-input
2527
type="Text"
@@ -28,13 +30,14 @@ exports[`Create a Form should use a single FormGroup's title as a Form title if
2830
</div>
2931
<ui5-label
3032
class="FormItem-label-0"
31-
style="grid-column-start: 1;"
33+
style="grid-column-start: 1; grid-row-start: 0;"
3234
wrap="true"
3335
>
3436
item 2:
3537
</ui5-label>
3638
<div
3739
class="FormItem-content-0"
40+
style="grid-row-start: 0;"
3841
>
3942
<ui5-input
4043
type="Number"
@@ -47,7 +50,8 @@ exports[`Create a Form should use a single FormGroup's title as a Form title if
4750
exports[`Create a Form size rate L; should create Label and Element with 33% and 66% width respectively and display: flex for top FormItem div 1`] = `
4851
<div
4952
class="Form-form-0"
50-
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4; --ui5wcr_form_full_span: span 12; grid-template-columns: repeat(12, 1fr);"
53+
data-columns="1"
54+
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4;"
5155
>
5256
<ui5-title
5357
class="Form-formTitle-0"
@@ -63,13 +67,14 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
6367
</ui5-title>
6468
<ui5-label
6569
class="FormItem-label-0"
66-
style="grid-column-start: 1;"
70+
style="grid-column-start: 1; grid-row-start: 0;"
6771
wrap="true"
6872
>
6973
item 1:
7074
</ui5-label>
7175
<div
7276
class="FormItem-content-0"
77+
style="grid-row-start: 0;"
7378
>
7479
<ui5-input
7580
type="Text"
@@ -78,13 +83,14 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
7883
</div>
7984
<ui5-label
8085
class="FormItem-label-0"
81-
style="grid-column-start: 1;"
86+
style="grid-column-start: 1; grid-row-start: 0;"
8287
wrap="true"
8388
>
8489
item 2:
8590
</ui5-label>
8691
<div
8792
class="FormItem-content-0"
93+
style="grid-row-start: 0;"
8894
>
8995
<ui5-input
9096
type="Number"
@@ -99,13 +105,14 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
99105
</ui5-title>
100106
<ui5-label
101107
class="FormItem-label-0"
102-
style="grid-column-start: 1;"
108+
style="grid-column-start: 1; grid-row-start: 0;"
103109
wrap="true"
104110
>
105111
item 1:
106112
</ui5-label>
107113
<div
108114
class="FormItem-content-0"
115+
style="grid-row-start: 0;"
109116
>
110117
<ui5-input
111118
type="Text"
@@ -114,13 +121,14 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
114121
</div>
115122
<ui5-label
116123
class="FormItem-label-0"
117-
style="grid-column-start: 1;"
124+
style="grid-column-start: 1; grid-row-start: 0;"
118125
wrap="true"
119126
>
120127
item 2:
121128
</ui5-label>
122129
<div
123130
class="FormItem-content-0"
131+
style="grid-row-start: 0;"
124132
>
125133
<ui5-input
126134
type="Number"
@@ -133,7 +141,8 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
133141
exports[`Create a Form size rate M; should create Label and Element with 16% and 83% width respectively and display: flex for top FormItem div 1`] = `
134142
<div
135143
class="Form-form-0"
136-
style="--ui5wcr_form_content_span: 10; --ui5wcr_form_label_span: 2; --ui5wcr_form_full_span: span 12; grid-template-columns: repeat(12, 1fr);"
144+
data-columns="1"
145+
style="--ui5wcr_form_content_span: 10; --ui5wcr_form_label_span: 2;"
137146
>
138147
<ui5-title
139148
class="Form-formTitle-0"
@@ -149,13 +158,14 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
149158
</ui5-title>
150159
<ui5-label
151160
class="FormItem-label-0"
152-
style="grid-column-start: 1;"
161+
style="grid-column-start: 1; grid-row-start: 0;"
153162
wrap="true"
154163
>
155164
item 1:
156165
</ui5-label>
157166
<div
158167
class="FormItem-content-0"
168+
style="grid-row-start: 0;"
159169
>
160170
<ui5-input
161171
type="Text"
@@ -164,13 +174,14 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
164174
</div>
165175
<ui5-label
166176
class="FormItem-label-0"
167-
style="grid-column-start: 1;"
177+
style="grid-column-start: 1; grid-row-start: 0;"
168178
wrap="true"
169179
>
170180
item 2:
171181
</ui5-label>
172182
<div
173183
class="FormItem-content-0"
184+
style="grid-row-start: 0;"
174185
>
175186
<ui5-input
176187
type="Number"
@@ -185,13 +196,14 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
185196
</ui5-title>
186197
<ui5-label
187198
class="FormItem-label-0"
188-
style="grid-column-start: 1;"
199+
style="grid-column-start: 1; grid-row-start: 0;"
189200
wrap="true"
190201
>
191202
item 1:
192203
</ui5-label>
193204
<div
194205
class="FormItem-content-0"
206+
style="grid-row-start: 0;"
195207
>
196208
<ui5-input
197209
type="Text"
@@ -200,13 +212,14 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
200212
</div>
201213
<ui5-label
202214
class="FormItem-label-0"
203-
style="grid-column-start: 1;"
215+
style="grid-column-start: 1; grid-row-start: 0;"
204216
wrap="true"
205217
>
206218
item 2:
207219
</ui5-label>
208220
<div
209221
class="FormItem-content-0"
222+
style="grid-row-start: 0;"
210223
>
211224
<ui5-input
212225
type="Number"
@@ -219,7 +232,8 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
219232
exports[`Create a Form size rate S; should create Label and Element with 100% width and display: block for top FormItem div 1`] = `
220233
<div
221234
class="Form-form-0"
222-
style="--ui5wcr_form_content_span: 12; --ui5wcr_form_label_span: 12; --ui5wcr_form_full_span: span 12; grid-template-columns: repeat(12, 1fr); --ui5wcr_form_label_text_align: start;"
235+
data-columns="1"
236+
style="--ui5wcr_form_content_span: 12; --ui5wcr_form_label_span: 12; --ui5wcr_form_label_text_align: start;"
223237
>
224238
<ui5-title
225239
class="Form-formTitle-0"
@@ -235,13 +249,14 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
235249
</ui5-title>
236250
<ui5-label
237251
class="FormItem-label-0"
238-
style="grid-column-start: 1;"
252+
style="grid-column-start: 1; grid-row-start: 0;"
239253
wrap="true"
240254
>
241255
item 1:
242256
</ui5-label>
243257
<div
244258
class="FormItem-content-0"
259+
style="grid-row-start: 0;"
245260
>
246261
<ui5-input
247262
type="Text"
@@ -250,13 +265,14 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
250265
</div>
251266
<ui5-label
252267
class="FormItem-label-0"
253-
style="grid-column-start: 1;"
268+
style="grid-column-start: 1; grid-row-start: 0;"
254269
wrap="true"
255270
>
256271
item 2:
257272
</ui5-label>
258273
<div
259274
class="FormItem-content-0"
275+
style="grid-row-start: 0;"
260276
>
261277
<ui5-input
262278
type="Number"
@@ -271,13 +287,14 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
271287
</ui5-title>
272288
<ui5-label
273289
class="FormItem-label-0"
274-
style="grid-column-start: 1;"
290+
style="grid-column-start: 1; grid-row-start: 0;"
275291
wrap="true"
276292
>
277293
item 1:
278294
</ui5-label>
279295
<div
280296
class="FormItem-content-0"
297+
style="grid-row-start: 0;"
281298
>
282299
<ui5-input
283300
type="Text"
@@ -286,13 +303,14 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
286303
</div>
287304
<ui5-label
288305
class="FormItem-label-0"
289-
style="grid-column-start: 1;"
306+
style="grid-column-start: 1; grid-row-start: 0;"
290307
wrap="true"
291308
>
292309
item 2:
293310
</ui5-label>
294311
<div
295312
class="FormItem-content-0"
313+
style="grid-row-start: 0;"
296314
>
297315
<ui5-input
298316
type="Number"
@@ -305,7 +323,8 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
305323
exports[`Create a Form size rate XL; should create Label and Element with 33% and 66% width respectively and display: flex for top FormItem div 1`] = `
306324
<div
307325
class="Form-form-0"
308-
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4; --ui5wcr_form_full_span: span 24; grid-template-columns: repeat(24, 1fr);"
326+
data-columns="2"
327+
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4;"
309328
>
310329
<ui5-title
311330
class="Form-formTitle-0"
@@ -315,25 +334,20 @@ exports[`Create a Form size rate XL; should create Label and Element with 33% an
315334
</ui5-title>
316335
<ui5-title
317336
level="H5"
318-
style="padding-bottom: 0.75rem; grid-column: span 12;"
337+
style="padding-bottom: 0.75rem; grid-column-end: span 12; grid-column-start: 1; grid-row-start: 2;"
319338
>
320339
Group 1
321340
</ui5-title>
322-
<ui5-title
323-
level="H5"
324-
style="padding-bottom: 0.75rem; grid-column: span 12;"
325-
>
326-
Group 2
327-
</ui5-title>
328341
<ui5-label
329342
class="FormItem-label-0"
330-
style="grid-column-start: 1;"
343+
style="grid-column-start: 1; grid-row-start: 3;"
331344
wrap="true"
332345
>
333346
item 1:
334347
</ui5-label>
335348
<div
336349
class="FormItem-content-0"
350+
style="grid-column-start: 5; grid-row-start: 3;"
337351
>
338352
<ui5-input
339353
type="Text"
@@ -342,43 +356,52 @@ exports[`Create a Form size rate XL; should create Label and Element with 33% an
342356
</div>
343357
<ui5-label
344358
class="FormItem-label-0"
345-
style="grid-column-start: 13;"
359+
style="grid-column-start: 1; grid-row-start: 4;"
346360
wrap="true"
347361
>
348-
item 1:
362+
item 2:
349363
</ui5-label>
350364
<div
351365
class="FormItem-content-0"
366+
style="grid-column-start: 5; grid-row-start: 4;"
352367
>
353368
<ui5-input
354-
type="Text"
369+
type="Number"
355370
value-state="None"
356371
/>
357372
</div>
373+
<ui5-title
374+
level="H5"
375+
style="padding-bottom: 0.75rem; grid-column-end: span 12; grid-column-start: 13; grid-row-start: 2;"
376+
>
377+
Group 2
378+
</ui5-title>
358379
<ui5-label
359380
class="FormItem-label-0"
360-
style="grid-column-start: 1;"
381+
style="grid-column-start: 13; grid-row-start: 3;"
361382
wrap="true"
362383
>
363-
item 2:
384+
item 1:
364385
</ui5-label>
365386
<div
366387
class="FormItem-content-0"
388+
style="grid-column-start: 17; grid-row-start: 3;"
367389
>
368390
<ui5-input
369-
type="Number"
391+
type="Text"
370392
value-state="None"
371393
/>
372394
</div>
373395
<ui5-label
374396
class="FormItem-label-0"
375-
style="grid-column-start: 13;"
397+
style="grid-column-start: 13; grid-row-start: 4;"
376398
wrap="true"
377399
>
378400
item 2:
379401
</ui5-label>
380402
<div
381403
class="FormItem-content-0"
404+
style="grid-column-start: 17; grid-row-start: 4;"
382405
>
383406
<ui5-input
384407
type="Number"

0 commit comments

Comments
 (0)