common/templates/common/components/field.html

@@ -1,5 +1,7 @@
+{% load common %}
 {% spaceless %}
-  {% with type=field.field.widget.input_type %}
+  {% with type=field.field.widget.input_type classes=classes|default:"" placeholder=placeholder|default:"" %}
+    {% with field=field|remove_cols_rows|add_classes:classes|set_placeholder:placeholder %}
     {% firstof label field.label as label %}
 
     {% comment %} Checkboxes {% endcomment %}
@@ -43,4 +45,5 @@
       <div class="invalid-feedback">{{ field.errors }}</div>
     {% endif %}
   {% endwith %}
+  {% endwith %}
 {% endspaceless %}

common/templatetags/common.py

@@ -2,6 +2,7 @@ from urllib.parse import urlparse
 import json
 import logging
 
+from django.forms.boundfield import BoundField
 from django.template import Library, loader
 from django.template.defaultfilters import stringfilter
 from django.utils.safestring import mark_safe
@@ -166,3 +167,32 @@ def replace(value, old_char_new_char):
 @register.filter(name='unread_notification_count')
 def unread_notification_count(user):
     return Notification.objects.filter(recipient=user, read_at__isnull=True).count()
+
+
+@register.filter(name='add_classes')
+def add_classes(bound_field: BoundField, classes: str):
+    """Add classes to the `class` attribute of the given form field's widget.
+
+    Expects a string of space-separated classes.
+    """
+    class_value = bound_field.field.widget.attrs.get('class', '')
+    bound_field.field.widget.attrs['class'] = class_value + f' {classes}'
+    return bound_field
+
+
+@register.filter(name='set_placeholder')
+def set_placeholder(bound_field: BoundField, placeholder: str):
+    """Set `placeholder` attribute of the given form field's widget."""
+    bound_field.field.widget.attrs['placeholder'] = placeholder
+    return bound_field
+
+
+@register.filter(name='remove_cols_rows')
+def remove_cols_rows(bound_field: BoundField):
+    """Removes cols and rows attributes from the form field's widget.
+
+    We'd rather go the CSS route when it comes to styling textareas.
+    """
+    bound_field.field.widget.attrs.pop('cols', None)
+    bound_field.field.widget.attrs.pop('rows', None)
+    return bound_field

extensions/templates/extensions/manage/update.html

@@ -30,7 +30,7 @@
 
       <section class="card p-3">
         <div>
-          {% include "common/components/field.html" with field=form.description label="Description" %}
+          {% include "common/components/field.html" with field=form.description label="Description" classes="one two three" placeholder="Describe this extension" %}
         </div>
 
         <div>