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