Forms: Adjust spacing of form items

[kfenner]

We recognized that the spacing of form items is not fully aligned between Figma and the implementation, and the adjustements for the help pattern seems not being applied everywhere in Figma.

First, we need to align on the spacing we actually want. And then go through Figma, the implementation, and documentation and align the spacing everywhere.

/cc @hbxes @panch1739 @spike-rabbit @timowolf

[panch1739]

@kfenner im a bit confused, Figma and code, both have a spacing of 4px:

Are we unhappy with this spacing?

[timowolf]

@panch1739 Let us just compare Figma with the code.

[panch1739]

@kfenner You were right, there was a difference. We need to do some adjustments, this way we improve accessibility and align with iX.

Distance between for items should be 16px:

Checkboxes and radio buttons, need to have a total height of 20px and separated from other groups by a distance of 4px:

Success Criterion 2.5.8 Target Size (Minimum) Level AA

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target.

@spike-rabbit could you help me out? Do you need specs for this or is it clear enough? I updated the components in the branch for element 51 in Figma

[spike-rabbit]

What about a form where checkbox / inputs are mixed:

The screenshot in action: #2455

4px is only within groups of radio / checkbox or generally to whatever follows a checkbox?