Skip to content

Commit 40d9579

Browse files
MarcusNotheisMarcusNotheis
authored
feat(Form): add props to control labelSpan and columns for each size (#578)
1 parent 7d6537f commit 40d9579

File tree

4 files changed

+206
-102
lines changed

4 files changed

+206
-102
lines changed

‎packages/main/src/components/Form/Form.jss.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ const styles = {
44
form: {
55
display: 'grid',
66
alignItems: 'center',
7-
rowGap: '0.5rem',
8-
columnGap: '0.25rem',
7+
rowGap: '0.25rem',
8+
columnGap: '0.5rem',
99
gridTemplateColumns: `repeat(12, 1fr)`,
1010
'--ui5wcr_form_full_span': 'span 12',
1111
'--ui5wcr_form_label_text_align': 'end'

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

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
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="grid-template-columns: repeat(24, 1fr); --ui5wcr_form_full_span: span 24; --ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4;"
6+
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4; --ui5wcr_form_full_span: span 24; grid-template-columns: repeat(24, 1fr);"
77
>
88
<ui5-title
99
class="Form-formTitle-0"
@@ -14,6 +14,7 @@ exports[`Create a Form should use a single FormGroup's title as a Form title if
1414
<ui5-label
1515
class="FormItem-label-0"
1616
style="grid-column-start: 1;"
17+
wrap="true"
1718
>
1819
item 1:
1920
</ui5-label>
@@ -28,6 +29,7 @@ exports[`Create a Form should use a single FormGroup's title as a Form title if
2829
<ui5-label
2930
class="FormItem-label-0"
3031
style="grid-column-start: 1;"
32+
wrap="true"
3133
>
3234
item 2:
3335
</ui5-label>
@@ -45,7 +47,7 @@ exports[`Create a Form should use a single FormGroup's title as a Form title if
4547
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`] = `
4648
<div
4749
class="Form-form-0"
48-
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4;"
50+
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4; --ui5wcr_form_full_span: span 12; grid-template-columns: repeat(12, 1fr);"
4951
>
5052
<ui5-title
5153
class="Form-formTitle-0"
@@ -62,6 +64,7 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
6264
<ui5-label
6365
class="FormItem-label-0"
6466
style="grid-column-start: 1;"
67+
wrap="true"
6568
>
6669
item 1:
6770
</ui5-label>
@@ -76,6 +79,7 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
7679
<ui5-label
7780
class="FormItem-label-0"
7881
style="grid-column-start: 1;"
82+
wrap="true"
7983
>
8084
item 2:
8185
</ui5-label>
@@ -96,6 +100,7 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
96100
<ui5-label
97101
class="FormItem-label-0"
98102
style="grid-column-start: 1;"
103+
wrap="true"
99104
>
100105
item 1:
101106
</ui5-label>
@@ -110,6 +115,7 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
110115
<ui5-label
111116
class="FormItem-label-0"
112117
style="grid-column-start: 1;"
118+
wrap="true"
113119
>
114120
item 2:
115121
</ui5-label>
@@ -127,7 +133,7 @@ exports[`Create a Form size rate L; should create Label and Element with 33% and
127133
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`] = `
128134
<div
129135
class="Form-form-0"
130-
style="--ui5wcr_form_content_span: 10; --ui5wcr_form_label_span: 2;"
136+
style="--ui5wcr_form_content_span: 10; --ui5wcr_form_label_span: 2; --ui5wcr_form_full_span: span 12; grid-template-columns: repeat(12, 1fr);"
131137
>
132138
<ui5-title
133139
class="Form-formTitle-0"
@@ -144,6 +150,7 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
144150
<ui5-label
145151
class="FormItem-label-0"
146152
style="grid-column-start: 1;"
153+
wrap="true"
147154
>
148155
item 1:
149156
</ui5-label>
@@ -158,6 +165,7 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
158165
<ui5-label
159166
class="FormItem-label-0"
160167
style="grid-column-start: 1;"
168+
wrap="true"
161169
>
162170
item 2:
163171
</ui5-label>
@@ -178,6 +186,7 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
178186
<ui5-label
179187
class="FormItem-label-0"
180188
style="grid-column-start: 1;"
189+
wrap="true"
181190
>
182191
item 1:
183192
</ui5-label>
@@ -192,6 +201,7 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
192201
<ui5-label
193202
class="FormItem-label-0"
194203
style="grid-column-start: 1;"
204+
wrap="true"
195205
>
196206
item 2:
197207
</ui5-label>
@@ -209,7 +219,7 @@ exports[`Create a Form size rate M; should create Label and Element with 16% and
209219
exports[`Create a Form size rate S; should create Label and Element with 100% width and display: block for top FormItem div 1`] = `
210220
<div
211221
class="Form-form-0"
212-
style="--ui5wcr_form_content_span: 12; --ui5wcr_form_label_span: 12; --ui5wcr_form_label_text_align: start;"
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;"
213223
>
214224
<ui5-title
215225
class="Form-formTitle-0"
@@ -226,6 +236,7 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
226236
<ui5-label
227237
class="FormItem-label-0"
228238
style="grid-column-start: 1;"
239+
wrap="true"
229240
>
230241
item 1:
231242
</ui5-label>
@@ -240,6 +251,7 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
240251
<ui5-label
241252
class="FormItem-label-0"
242253
style="grid-column-start: 1;"
254+
wrap="true"
243255
>
244256
item 2:
245257
</ui5-label>
@@ -260,6 +272,7 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
260272
<ui5-label
261273
class="FormItem-label-0"
262274
style="grid-column-start: 1;"
275+
wrap="true"
263276
>
264277
item 1:
265278
</ui5-label>
@@ -274,6 +287,7 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
274287
<ui5-label
275288
class="FormItem-label-0"
276289
style="grid-column-start: 1;"
290+
wrap="true"
277291
>
278292
item 2:
279293
</ui5-label>
@@ -291,7 +305,7 @@ exports[`Create a Form size rate S; should create Label and Element with 100% wi
291305
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`] = `
292306
<div
293307
class="Form-form-0"
294-
style="grid-template-columns: repeat(24, 1fr); --ui5wcr_form_full_span: span 24; --ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4;"
308+
style="--ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4; --ui5wcr_form_full_span: span 24; grid-template-columns: repeat(24, 1fr);"
295309
>
296310
<ui5-title
297311
class="Form-formTitle-0"
@@ -314,6 +328,7 @@ exports[`Create a Form size rate XL; should create Label and Element with 33% an
314328
<ui5-label
315329
class="FormItem-label-0"
316330
style="grid-column-start: 1;"
331+
wrap="true"
317332
>
318333
item 1:
319334
</ui5-label>
@@ -328,6 +343,7 @@ exports[`Create a Form size rate XL; should create Label and Element with 33% an
328343
<ui5-label
329344
class="FormItem-label-0"
330345
style="grid-column-start: 13;"
346+
wrap="true"
331347
>
332348
item 1:
333349
</ui5-label>
@@ -342,6 +358,7 @@ exports[`Create a Form size rate XL; should create Label and Element with 33% an
342358
<ui5-label
343359
class="FormItem-label-0"
344360
style="grid-column-start: 1;"
361+
wrap="true"
345362
>
346363
item 2:
347364
</ui5-label>
@@ -356,6 +373,7 @@ exports[`Create a Form size rate XL; should create Label and Element with 33% an
356373
<ui5-label
357374
class="FormItem-label-0"
358375
style="grid-column-start: 13;"
376+
wrap="true"
359377
>
360378
item 2:
361379
</ui5-label>

0 commit comments

Comments
 (0)