Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🌸 DesignLibrary: Form field hints #2082

Open
Tracked by #1187
rosschapman opened this issue Jan 4, 2024 · 4 comments
Open
Tracked by #1187

🌸 DesignLibrary: Form field hints #2082

rosschapman opened this issue Jan 4, 2024 · 4 comments
Labels
🌸 Polish Improves the UX! 🌱 Ready for Dev Stuff we are able to move forward on

Comments

@rosschapman
Copy link
Contributor

rosschapman commented Jan 4, 2024

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.

@rosschapman rosschapman changed the title Standardize how form field hints are displayed ✨ Standardize how form field hints are displayed Jan 4, 2024
@zspencer
Copy link
Member

zspencer commented Jan 4, 2024

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

@zspencer zspencer changed the title ✨ Standardize how form field hints are displayed DesignLibrary: Form field hints Jan 4, 2024
@zspencer zspencer mentioned this issue Jan 4, 2024
12 tasks
@zspencer
Copy link
Member

zspencer commented Jan 4, 2024

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

@rosschapman
Copy link
Contributor Author

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

@anaulin
Copy link
Member

anaulin commented Jan 4, 2024

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.

@zspencer zspencer changed the title DesignLibrary: Form field hints 🌸 DesignLibrary: Form field hints Feb 17, 2024
@rosschapman rosschapman added 🌱 Ready for Dev Stuff we are able to move forward on 🌸 Polish Improves the UX! labels Mar 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌸 Polish Improves the UX! 🌱 Ready for Dev Stuff we are able to move forward on
Projects
None yet
Development

No branches or pull requests

3 participants