Skip to content

Commit 7e7c73c

Browse files
mimccionickgros
mimccio
and
nickgros
authored
feat(templates): align buttons with input field in type array (#4753)
* feat(templates): align buttons with input field in type array The buttons are not aligned. We can add "items-center" to align the buttons (move up, move down, delete) with the field * Update snapshots * Update CHANGELOG --------- Co-authored-by: Nick Grosenbacher <[email protected]>
1 parent 2745032 commit 7e7c73c

File tree

3 files changed

+27
-21
lines changed

3 files changed

+27
-21
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
1515
should change the heading of the (upcoming) version to include a major version bump.
1616
1717
-->
18+
# 6.0.0-beta.17
19+
20+
## @rjsf/shadcn
21+
22+
- Update ArrayFieldItemTemplate to align buttons with the input field [#4753](https://github.com/rjsf-team/react-jsonschema-form/pull/4753)
23+
1824
# 6.0.0-beta.16
1925

2026
## @rjsf/antd

‎packages/shadcn/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function ArrayFieldItemTemplate<
2525
);
2626
return (
2727
<div>
28-
<div className='mb-2 flex flex-row flex-wrap'>
28+
<div className='mb-2 flex flex-row flex-wrap items-center'>
2929
<div className='grow shrink'>{children}</div>
3030
<div className='flex items-end justify-end p-0.5'>
3131
{hasToolbar && (

‎packages/shadcn/test/__snapshots__/Array.test.tsx.snap‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ exports[`array fields array icons 1`] = `
109109
>
110110
<div>
111111
<div
112-
className="mb-2 flex flex-row flex-wrap"
112+
className="mb-2 flex flex-row flex-wrap items-center"
113113
>
114114
<div
115115
className="grow shrink"
@@ -290,7 +290,7 @@ exports[`array fields array icons 1`] = `
290290
</div>
291291
<div>
292292
<div
293-
className="mb-2 flex flex-row flex-wrap"
293+
className="mb-2 flex flex-row flex-wrap items-center"
294294
>
295295
<div
296296
className="grow shrink"
@@ -724,7 +724,7 @@ exports[`array fields fixed array 1`] = `
724724
>
725725
<div>
726726
<div
727-
className="mb-2 flex flex-row flex-wrap"
727+
className="mb-2 flex flex-row flex-wrap items-center"
728728
>
729729
<div
730730
className="grow shrink"
@@ -772,7 +772,7 @@ exports[`array fields fixed array 1`] = `
772772
</div>
773773
<div>
774774
<div
775-
className="mb-2 flex flex-row flex-wrap"
775+
className="mb-2 flex flex-row flex-wrap items-center"
776776
>
777777
<div
778778
className="grow shrink"
@@ -1215,7 +1215,7 @@ exports[`with title and description array icons 1`] = `
12151215
>
12161216
<div>
12171217
<div
1218-
className="mb-2 flex flex-row flex-wrap"
1218+
className="mb-2 flex flex-row flex-wrap items-center"
12191219
>
12201220
<div
12211221
className="grow shrink"
@@ -1409,7 +1409,7 @@ exports[`with title and description array icons 1`] = `
14091409
</div>
14101410
<div>
14111411
<div
1412-
className="mb-2 flex flex-row flex-wrap"
1412+
className="mb-2 flex flex-row flex-wrap items-center"
14131413
>
14141414
<div
14151415
className="grow shrink"
@@ -1823,7 +1823,7 @@ exports[`with title and description fixed array 1`] = `
18231823
>
18241824
<div>
18251825
<div
1826-
className="mb-2 flex flex-row flex-wrap"
1826+
className="mb-2 flex flex-row flex-wrap items-center"
18271827
>
18281828
<div
18291829
className="grow shrink"
@@ -1884,7 +1884,7 @@ exports[`with title and description fixed array 1`] = `
18841884
</div>
18851885
<div>
18861886
<div
1887-
className="mb-2 flex flex-row flex-wrap"
1887+
className="mb-2 flex flex-row flex-wrap items-center"
18881888
>
18891889
<div
18901890
className="grow shrink"
@@ -2128,7 +2128,7 @@ exports[`with title and description from both array icons 1`] = `
21282128
>
21292129
<div>
21302130
<div
2131-
className="mb-2 flex flex-row flex-wrap"
2131+
className="mb-2 flex flex-row flex-wrap items-center"
21322132
>
21332133
<div
21342134
className="grow shrink"
@@ -2322,7 +2322,7 @@ exports[`with title and description from both array icons 1`] = `
23222322
</div>
23232323
<div>
23242324
<div
2325-
className="mb-2 flex flex-row flex-wrap"
2325+
className="mb-2 flex flex-row flex-wrap items-center"
23262326
>
23272327
<div
23282328
className="grow shrink"
@@ -2736,7 +2736,7 @@ exports[`with title and description from both fixed array 1`] = `
27362736
>
27372737
<div>
27382738
<div
2739-
className="mb-2 flex flex-row flex-wrap"
2739+
className="mb-2 flex flex-row flex-wrap items-center"
27402740
>
27412741
<div
27422742
className="grow shrink"
@@ -2797,7 +2797,7 @@ exports[`with title and description from both fixed array 1`] = `
27972797
</div>
27982798
<div>
27992799
<div
2800-
className="mb-2 flex flex-row flex-wrap"
2800+
className="mb-2 flex flex-row flex-wrap items-center"
28012801
>
28022802
<div
28032803
className="grow shrink"
@@ -3041,7 +3041,7 @@ exports[`with title and description from uiSchema array icons 1`] = `
30413041
>
30423042
<div>
30433043
<div
3044-
className="mb-2 flex flex-row flex-wrap"
3044+
className="mb-2 flex flex-row flex-wrap items-center"
30453045
>
30463046
<div
30473047
className="grow shrink"
@@ -3235,7 +3235,7 @@ exports[`with title and description from uiSchema array icons 1`] = `
32353235
</div>
32363236
<div>
32373237
<div
3238-
className="mb-2 flex flex-row flex-wrap"
3238+
className="mb-2 flex flex-row flex-wrap items-center"
32393239
>
32403240
<div
32413241
className="grow shrink"
@@ -3649,7 +3649,7 @@ exports[`with title and description from uiSchema fixed array 1`] = `
36493649
>
36503650
<div>
36513651
<div
3652-
className="mb-2 flex flex-row flex-wrap"
3652+
className="mb-2 flex flex-row flex-wrap items-center"
36533653
>
36543654
<div
36553655
className="grow shrink"
@@ -3710,7 +3710,7 @@ exports[`with title and description from uiSchema fixed array 1`] = `
37103710
</div>
37113711
<div>
37123712
<div
3713-
className="mb-2 flex flex-row flex-wrap"
3713+
className="mb-2 flex flex-row flex-wrap items-center"
37143714
>
37153715
<div
37163716
className="grow shrink"
@@ -3898,7 +3898,7 @@ exports[`with title and description with global label off array icons 1`] = `
38983898
>
38993899
<div>
39003900
<div
3901-
className="mb-2 flex flex-row flex-wrap"
3901+
className="mb-2 flex flex-row flex-wrap items-center"
39023902
>
39033903
<div
39043904
className="grow shrink"
@@ -4073,7 +4073,7 @@ exports[`with title and description with global label off array icons 1`] = `
40734073
</div>
40744074
<div>
40754075
<div
4076-
className="mb-2 flex flex-row flex-wrap"
4076+
className="mb-2 flex flex-row flex-wrap items-center"
40774077
>
40784078
<div
40794079
className="grow shrink"
@@ -4440,7 +4440,7 @@ exports[`with title and description with global label off fixed array 1`] = `
44404440
>
44414441
<div>
44424442
<div
4443-
className="mb-2 flex flex-row flex-wrap"
4443+
className="mb-2 flex flex-row flex-wrap items-center"
44444444
>
44454445
<div
44464446
className="grow shrink"
@@ -4482,7 +4482,7 @@ exports[`with title and description with global label off fixed array 1`] = `
44824482
</div>
44834483
<div>
44844484
<div
4485-
className="mb-2 flex flex-row flex-wrap"
4485+
className="mb-2 flex flex-row flex-wrap items-center"
44864486
>
44874487
<div
44884488
className="grow shrink"

0 commit comments

Comments
 (0)