New feature: field hints for forms inputs

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%;

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| -%>
     <div class="field-unit field-unit--<%= attribute.html_class %> field-unit--<%= requireness(attribute) %>">
       <%= render_field attribute, f: f %>
+
+      <% hint_key = "administrate.field_hints.#{page.resource_name}.#{attribute.name}" %>
+      <% if I18n.exists?(hint_key) -%>
+        <div class="field-unit__hint">
+          <%= I18n.t(hint_key) %>
+        </div>
+      <% end -%>
     </div>
   <% end -%>
 

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
+```

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