Update: now that the checkboxes are wrapped individual Field components, they have a 16px margin between them (currently 24px in MW core, but that's about to be reduced to 16px by the next Codex release). Normally, checkbox groups in Codex have a 12px margin between them. We should consider whether we want to override the styles on the block form in this case (or in CodexHTMLForm more generally for adjacent checkbox fields) to reduce the margin from 16px to 12px.

I'm for having a general approach of adjacent checkbox fields to feature slightly lesser margins, being more condensed and follow gestalt principle of proximity. What would be your take @DTorsani-WMF?

Change #1015615 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] [WIP] htmlform: Introduce Codex HTMLForm stylesheet

https://gerrit.wikimedia.org/r/1015615

In the Codex form guidelines, it suggests having 16px between all fields. If it is a new field with a new label, the spacing should be 16px. For a Checkbox group, the spacing between the checkboxes themselves, i.e. the different options with their own labels, should be 12px.

I may not be understanding the adjacent factor of this task specifically. Is there a visual you can provide so I can make sure I am understanding correctly?

@DTorsani-WMF This is the form currently:

On the same form further above are those Radios too:
{F44105122 width=50%}

A problem in my opinion is that we can't say for sure when checkbox fields are semantically connected. The only somewhat vague indication is being in one fieldset.

@Volker_E Thanks for sharing this image. Since these checkbox groups both have one label each at the top of the checkbox group, they seem completely related to me, and should therefore be 12px apart from one another, just as shown on the docs site.

Change #1015615 merged by jenkins-bot:

[mediawiki/core@master] htmlform: Introduce CodexHTMLForm stylesheet

https://gerrit.wikimedia.org/r/1015615