Integrate more into Form rendering API

Override BoundField to allow fields to be rendered using '{{ field.as_field_group }}' instead
of relying on template tags. This eliminates the need for '{% dsfr_form_field %}'.

Also implement Toggle form field

Author: christophehenry

dsfr/fields.py

@@ -1,7 +1,7 @@
 from django.core.exceptions import ValidationError
-from django.forms.fields import MultiValueField, IntegerField
+from django.forms.fields import MultiValueField, IntegerField, BooleanField
 
-from .widgets import NumberCursor
+from .widgets import NumberCursor, Toggle
 
 __all__ = ["IntegerRangeField"]
 
@@ -49,3 +49,16 @@ def compress(self, data_list: list[int]) -> range:
                 "Le second nombre doit être supérieur au premier pour déterminer un intervalle"
             )
         return range(data_list[0], data_list[1] + 1)
+
+
+class ToggleField(BooleanField):
+    widget = Toggle
+    template_name = "dsfr/toggle.html"
+
+    def __init__(self, **kwargs):
+        kwargs["label_suffix"] = ""
+        super().__init__(**kwargs)
+        if self.disabled:
+            self.widget.attrs.setdefault("disabled", "true")
+
+

dsfr/forms.py

@@ -1,10 +1,12 @@
 from pathlib import Path
 
+import django
 from django import forms
-from django.forms import Form
+from django.forms import Form, BoundField as DjangoBoundField
 from django.forms.renderers import DjangoTemplates, get_default_renderer
 from django.utils.functional import cached_property
 
+
 from dsfr.utils import dsfr_input_class_attr
 
 
@@ -24,17 +26,44 @@ def engine(self):
         )
 
 
+class BoundField(DjangoBoundField):
+    @property
+    def template_name(self):
+        template_name = self.field.template_name or getattr(
+            self.field.__class__, "template_name", None
+        )
+        if template_name:
+            return template_name
+
+        match self.widget_type:
+            case "checkboxinput":
+                return "dsfr/form_field_snippets/checkbox_snippet.html"
+            case "checkboxselectmultiple" | "inlinecheckboxselectmultiple":
+                return "dsfr/form_field_snippets/checkboxselectmultiple_snippet.html"
+            case "radioselect" | "inlineradioselect":
+                return "dsfr/form_field_snippets/radioselect_snippet.html"
+            case "richradioselect":
+                return "dsfr/form_field_snippets/richradioselect_snippet.html"
+            case "numbercursor":
+                return "dsfr/form_field_snippets/numbercursor_snippet.html"
+            case "segmentedcontrol":
+                return "dsfr/form_field_snippets/segmented_control_snippet.html"
+            case _:
+                return "dsfr/form_field_snippets/input_snippet.html"
+
+    def label_tag(self, contents=None, attrs=None, label_suffix=None, tag=None):
+        if hasattr(self.field.widget, "dsfr_label_attrs"):
+            attrs = {**self.field.widget.dsfr_label_attrs, **(attrs or {})}
+        return super().label_tag(contents, attrs, label_suffix, tag)
+
+
 class DsfrBaseForm(Form):
     """
     A base form that adds the necessary classes on relevant fields
     """
 
     template_name = "dsfr/form_snippet.html"  # type: ignore
-
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        for visible in self.visible_fields():
-            dsfr_input_class_attr(visible)
+    bound_field_class = BoundField
 
     @property
     def default_renderer(self):
@@ -46,6 +75,32 @@ def default_renderer(self):
             else get_default_renderer()
         )
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        for visible in self.visible_fields():
+            dsfr_input_class_attr(visible)
+
+    if django.VERSION < (5, 2):
+
+        def __getitem__(self, name):
+            try:
+                field = self.fields[name]
+            except KeyError:
+                raise KeyError(
+                    "Key '%s' not found in '%s'. Choices are: %s."
+                    % (
+                        name,
+                        self.__class__.__name__,
+                        ", ".join(sorted(self.fields)),
+                    )
+                )
+            if name not in self._bound_fields_cache:
+                bound_field_class = getattr(
+                    self, "bound_field_class", self.bound_field_class
+                )
+                self._bound_fields_cache[name] = bound_field_class(self, field, name)
+            return self._bound_fields_cache[name]
+
     def set_autofocus_on_first_error(self):
         """
         Sets the autofocus on the first field with an error message.

dsfr/templates/dsfr/form_base.html

@@ -36,7 +36,7 @@
         {# Everything that needs to be in the for loop #}
         {% block inside_form %}
         {% endblock inside_form %}
-        {% include "dsfr/form_field_snippets/field_snippet.html" %}
+        {{ field }}
       {% endfor %}
       {# If you need to add formsets after the form #}
       {% block extra_formset_after %}

dsfr/templates/dsfr/form_field_snippets/field_snippet.html

@@ -5,5 +5,9 @@
   </section>
 {% endif %}
 {% for field in form %}
-  {% dsfr_form_field field %}
+  {% if field.is_hidden %}
+    {{ field.as_hidden }}
+  {% else %}
+    {{ field.as_field_group }}
+  {% endif %}
 {% endfor %}

dsfr/templates/dsfr/form_snippet.html

@@ -21,7 +21,7 @@
             {# everything that needs to be in the loop for each field for each form in formset #}
             {% block inside_formset_field %}
             {% endblock inside_formset_field %}
-            {% include "dsfr/form_field_snippets/field_snippet.html" %}
+            {{ field }}
           {% endfor %}
           <div class="fr-mt-2w">
             <button id="remove-0"

dsfr/templates/dsfr/formset_base.html

@@ -1,21 +1,23 @@
-{% load i18n %}
-{% translate "Checked" as checked_label %}
-{% translate "Unchecked" as unchecked_label %}
-<div class="fr-toggle{% if self.extra_classes %} {{ self.extra_classes }}{% endif %}">
-  <input type="checkbox"
-         {% if self.is_disabled %}disabled{% endif %}
-         class="fr-toggle__input"
-         {% if self.help_text %}aria-describedby="{{ self.id }}-hint-text"{% endif %}
-         id="{{ self.id }}">
-  <label class="fr-toggle__label"
-         for="{{ self.id }}"
-         data-fr-checked-label="{{ checked_label }}"
-         data-fr-unchecked-label="{{ unchecked_label }}">
-    {{ self.label }}
-  </label>
-  {% if self.help_text %}
-    <p class="fr-hint-text" id="{{ self.id }}-hint-text">
-      {{ self.help_text }}
+<div class="{{ field.field.widget.dsfr_wrapper_class|default:"" }}{% if field.errors %} fr-toggle--error{% endif %}">
+  {{ field }}
+  {% if field.label %}
+    {{ field.label_tag }}
+  {% endif %}
+  {% if field.help_text %}
+    <p class="fr-hint-text" id="{{ field.field.widget.attrs.id }}-hint-text">
+      {{ field.help_text }}
     </p>
   {% endif %}
+  {% if field.errors %}
+    <div class="fr-messages-group"
+         id="{{ field.field.widget.attrs.id }}-messages"
+         aria-live="polite">
+      {% for error in field.errors %}
+        <p class="fr-message fr-message--error"
+           id="{{ field.field.widget.attrs.id }}-message-error">
+          {{ error }}
+        </p>
+      {% endfor %}
+    </div>
+  {% endif %}
 </div>

dsfr/templates/dsfr/toggle.html

@@ -15,6 +15,7 @@
     INTEGRITY_JS_MODULE,
     INTEGRITY_JS_NOMODULE,
 )
+from dsfr.forms import DsfrBaseForm
 from dsfr.utils import (
     find_active_menu_items,
     generate_random_id,
@@ -1343,7 +1344,7 @@ def dsfr_tile(*args, **kwargs) -> dict:
     return {"self": tag_data}
 
 
-@register.inclusion_tag("dsfr/toggle.html")
+@register.simple_tag
 def dsfr_toggle(*args, **kwargs) -> dict:
     """
     Returns a toggle item. Takes a dict as parameter, with the following structure:
@@ -1383,13 +1384,31 @@ def dsfr_toggle(*args, **kwargs) -> dict:
     ]
     tag_data = parse_tag_args(args, kwargs, allowed_keys)
 
+    warnings.warn(
+        "{% dsfr_toggle %} is deprecated; please use the ToggleField form field instead",
+        DeprecationWarning,
+        stacklevel=3,
+    )
+
     if "id" not in tag_data:
         tag_data["id"] = generate_random_id("toggle")
 
     if "is_disabled" not in tag_data:
         tag_data["is_disabled"] = False
 
-    return {"self": tag_data}
+    from ..fields import ToggleField
+
+    field = ToggleField(
+        required=False, label=tag_data["label"], help_text=tag_data.get("help_text", "")
+    )
+    if tag_data.get("is_disabled", False):
+        field.widget.attrs["disabled"] = tag_data["is_disabled"]
+    if tag_data.get("extra_classes", None):
+        field.widget.dsfr_wrapper_class += " " + tag_data["extra_classes"]
+    if tag_data.get("id", None):
+        field.widget.attrs["id"] = tag_data["id"]
+    form = type("ToggleForm", (DsfrBaseForm,), {"toggle": field})
+    return Template("{{ form.toggle.as_field_group }}").render(Context({"form": form}))
 
 
 @register.inclusion_tag("dsfr/tooltip.html")
@@ -1587,8 +1606,8 @@ def _render_alert_tag(message):
     )
 
 
-@register.inclusion_tag("dsfr/form_field_snippets/field_snippet.html")
-def dsfr_form_field(field) -> dict:
+@register.simple_tag(takes_context=True)
+def dsfr_form_field(context: Context, field) -> dict:
     """
     Returns the HTML for a form field snippet
 
@@ -1607,7 +1626,17 @@ def dsfr_form_field(field) -> dict:
     if field == "":
         raise AttributeError("Invalid form field name in dsfr_form_field.")
 
-    return {"field": field}
+    warnings.warn(
+        (
+            "{% dsfr_form_field field %} is deprecated; please use {{ field.as_field_group }}"
+            "of {{ field.as_hidden }} in your template instead"
+        ),
+        DeprecationWarning,
+        stacklevel=3,
+    )
+
+    with context.push("field", field) as ctx:
+        return Template("{{ field.as_field_group }}").render(ctx)
 
 
 register.filter(name="dsfr_input_class_attr", filter_func=dsfr_input_class_attr)

dsfr/templatetags/dsfr_tags.py

@@ -1093,8 +1093,9 @@ def test_toggle_rendered(self):
             <div class="fr-toggle fr-toggle--label-left fr-toggle--border-bottom">
                 <input type="checkbox"
                         class="fr-toggle__input"
-                        aria-describedby="toggle-full-hint-text"
-                        id="toggle-full">
+                        aria-describedby="id_toggle_helptext"
+                        id="toggle-full"
+                        name="toggle">
                 <label class="fr-toggle__label"
                         for="toggle-full"
                         data-fr-checked-label="Activé"

dsfr/test/test_templatetags.py

@@ -1,3 +1,4 @@
+import re
 import warnings
 from typing import Type
 
@@ -6,19 +7,21 @@
     ChoiceWidget,
     CheckboxSelectMultiple,
     NumberInput,
+    CheckboxInput
 )
 from django.http import QueryDict
 from django.utils.datastructures import MultiValueDict
+from django.utils.translation import gettext_lazy
 
 from dsfr.enums import ExtendedChoices
 
-
 __all__ = [
     "RichRadioSelect",
     "InlineRadioSelect",
     "InlineCheckboxSelectMultiple",
     "NumberCursor",
     "SegmentedControl",
+    "Toggle"
 ]
 
 
@@ -219,3 +222,17 @@ def __init__(
         super().__init__(*args, **kwargs)
         self.extra_classes = extra_classes
         self.is_inline = is_inline
+
+
+class Toggle(CheckboxInput):
+    dsfr_wrapper_class = "fr-toggle"
+    dsfr_input_class = "fr-toggle__input"
+    dsfr_label_attrs = {"data-fr-checked-label": gettext_lazy("Checked"), "data-fr-unchecked-label": gettext_lazy("Unchecked"), "class": "fr-toggle__label"}
+
+    def __init__(self, attrs=None, check_test=None, dsfr_input_class=None, dsfr_label_attrs=None, dsfr_wrapper_class=None):
+        super().__init__(attrs, check_test)
+        self.dsfr_input_class = dsfr_input_class or self.dsfr_input_class
+        self.dsfr_label_attrs = dsfr_label_attrs or self.dsfr_label_attrs
+        self.dsfr_wrapper_class = dsfr_wrapper_class or self.dsfr_wrapper_class
+        css_class = re.sub(rf"\s*{re.escape(self.dsfr_input_class)}\s*", "", self.attrs.get("class", ""))
+        self.attrs["class"] = f"{self.dsfr_input_class} {css_class}".strip()