FormGroup does not honor system arguments

[Kharonus]

Ahoi!

When composing a primer form with the DSL, one has the possibilities to group some inputs into form groups. This has the very famous use case of grouping some inputs horizontally, while the whole form stacks vertically.

Code example:

form do |new_item_form|
  new_item_form.group(layout: :horizontal) do |input_group|
    input_group.text_field(
      name: :label,
      label: "Label",
      visually_hide_label: true,
      required: true,
      placeholder: "Item label"
    )
    input_group.text_field(
      name: :short,
      label: "Short",
      visually_hide_label: true,
      full_width: false,
      required: false,
      placeholder: "Short label"
    )
  end

  new_item_form.group(layout: :horizontal) do |button_group|
    button_group.button(name: :cancel, label: "Cancel", scheme: :default)
    button_group.submit(name: :submit, label: "Save", scheme: :primary)
  end
end

The text fields together stretch to full width, but my intend with the button group is, that they are right aligned. When inspecting the DOM in the browser, the solution is almost trivial.

As the form is wrapped in a FormControl-spacingWrapper, which is display:flex, and each form.group(layout: :horizontal) creates a child <div class="FormControl-horizontalGroup"></div>. So, one could add align-self: end to the div of the form group and everything looks as intended.

The primer way of doing so is passing system arguments. But, alas, amending the form group in a way to have

new_item_form.group(layout: :horizontal, align_self: :end)

has no effect. Looking into the code, it seems, that on the group no system arguments are passed down to the created div. From the code I'd like to raise two questions:

1. Is it possible to enable the system arguments on the created element of the group?
2. Why actually is there a conditional element creation? Why is a vertical form group not honored with a container for itself? Then it could receive system arguments, too, being able to change alignment or spacing of certain form groups directly from the form definition.

Looking forward for your answers!

Best regards!

[lesliecdubs]

Thanks for writing in! @camertron given your context on forms, could you take a look at answering the two questions above? 🙏🏻

[camertron]

Hey @Kharonus! Thanks for filing such a detailed and reproducible issue 😄 I believe the decision to not support system arguments on groups was because groups were really only designed to support vertical/horizontal orientations as you noted. I was initially hesitant to allow arbitrary system arguments on groups because the forms framework generally tries to expose as few layout/styling options as possible to curtail potential accessibility issues, etc. However, I've revised my opinion a bit based on your description of the problem. Since we support system arguments on most other parts of the framework, it seems reasonable to support them in groups as well.

See: #3149

[Kharonus]

Great, those are very good news. Thanks a ton for the quick PR!