🌸 DesignLibrary: Form field hints

[rosschapman]

• 🌸 DesignLibrary #1187

As @anaulin recently noted, we lack a standard way of adding and styling form field hints. This adds some friction for devs.

Rather than leave devs to their own devices, we might create a wrapper component for form fields like FormFieldWithHint. Although this opens up the question of whether to build this enhancement on top of a more atomical FormField component.

[zspencer]

Having gone down the FormFieldComponent path; I would strongly recommend writing a FormBuilder first.

[zspencer]

I've cross-linked this with the DesignLibrary issue; which is pretty much a very bare skeleton.

[rosschapman]

Yes yes, I remember now having this conversation with you @zspencer. 👍🏻

[anaulin]

I would start by adding a partial called "hint", and use it in the various shared form field partials we already have, the same way we do with the "error" partial.

So e.g. https://github.com/zinc-collective/convene/blob/main/app/views/application/_text_field.html.erb would become:

<%- disabled = local_assigns.fetch(:disabled?, false)%>
<div>
  <%= form.label attribute %>
  <%= form.text_field attribute, disabled: disabled %>
  <%= render partial: "hint", locals: { model: form.object, attribute: attribute } %>
  <%= render partial: "error", locals: { model: form.object, attribute: attribute } %>
</div>

Plus a standard way of putting the hint text in the locales file, say under attributes.attribute_name.hint or whatever, so that the hint partial can access them in a uniform way.

If/when that becomes necessary, we can start moving this into components.