diff --git a/app/assets/stylesheets/administrate/components/_field-unit.scss b/app/assets/stylesheets/administrate/components/_field-unit.scss index 235fdca96d..93a88fc3a3 100644 --- a/app/assets/stylesheets/administrate/components/_field-unit.scss +++ b/app/assets/stylesheets/administrate/components/_field-unit.scss @@ -2,6 +2,7 @@ @include administrate-clearfix; align-items: center; display: flex; + flex-wrap: wrap; margin-bottom: $base-spacing; position: relative; width: 100%; @@ -25,6 +26,12 @@ } } +.field-unit__hint { + font-size: 90%; + margin-left: calc(15% + 2rem); + width: 100%; +} + .field-unit--nested { border: $base-border; margin-left: 7.5%; diff --git a/app/views/administrate/application/_form.html.erb b/app/views/administrate/application/_form.html.erb index 5d798eaa10..d08883679a 100644 --- a/app/views/administrate/application/_form.html.erb +++ b/app/views/administrate/application/_form.html.erb @@ -36,6 +36,13 @@ and renders all form fields for a resource's editable attributes. <% page.attributes(controller.action_name).each do |attribute| -%>
<%= render_field attribute, f: f %> + + <% hint_key = "administrate.field_hints.#{page.resource_name}.#{attribute.name}" %> + <% if I18n.exists?(hint_key) -%> +
+ <%= I18n.t(hint_key) %> +
+ <% end -%>
<% end -%> diff --git a/docs/customizing_dashboards.md b/docs/customizing_dashboards.md index 26d827ead9..fcbd2bf3a6 100644 --- a/docs/customizing_dashboards.md +++ b/docs/customizing_dashboards.md @@ -385,3 +385,21 @@ FORM_ATTRIBUTES_EDIT = [ ``` Or for custom action with constant name `"FORM_ATTRIBUTES_#{action.upcase}"` + +### Form Fields' Hints + +You can show a brief text element below an input field by setting the +corresponding translation key using the path: + +`administrate.field_hints.#{model_name}.#{field_name}` + +For example, with a Customer dashboard with an email field you can add a +string value that will be used as text hint: + +```yml +en: + administrate: + field_hints: + customer: + email: field_hint +``` diff --git a/spec/features/form_spec.rb b/spec/features/form_spec.rb index b92e1bd29c..2132c51752 100644 --- a/spec/features/form_spec.rb +++ b/spec/features/form_spec.rb @@ -105,4 +105,27 @@ expect(element_selections.first("option").value).not_to eq("") end end + + context "fields hints" do + it "displays a field hint element within the field unit" do + field_hint = "The typology of customer" + + translations = { + administrate: { + field_hints: { + customer: { + kind: field_hint, + }, + }, + }, + } + + with_translations(:en, translations) do + visit new_admin_customer_path + + css_hint_element = ".field-unit > .field-unit__hint" + expect(page).to have_css(css_hint_element, text: field_hint) + end + end + end end