Champ de formulaire pour les contrôles segmentés (#233)

* refactor(widgets): rename _RichChoiceWidget to something more generic

Its content was actually not specific to RichRadioButtonChoices.

This makes it possible to reuse this logic for another widget that uses ExtendedChoices

* feat(widgets): new SegmentedControl widget for ChoiceFields

* feat(example_app): add some examples in form for SegmentedControl widget

* feat(example_app): update not-yet-implemented components doc

* fixup! refactor(widgets): rename _RichChoiceWidget to something more generic

Author: David-Guillot

doc/forms.md

@@ -333,6 +333,7 @@ from dsfr.utils import lazy_static
 from dsfr.enums import RichRadioButtonChoices
 from dsfr.widgets import RichRadioSelect
 
+
 class ExampleRichChoices(RichRadioButtonChoices, IntegerChoices):
     ITEM_1 = {
         "value": auto(),
@@ -353,13 +354,14 @@ class ExampleRichChoices(RichRadioButtonChoices, IntegerChoices):
         "pictogram": lazy_static("img/placeholder.1x1.png"),
     }
 
+
 class ExampleForm(DsfrBaseForm):
     sample_rich_radio = forms.ChoiceField(
         label="Cases à cocher",
         required=False,
         choices=ExampleRichChoices.choices,
         help_text="Exemple de boutons radios riches",
-        widget=RichRadioSelect(rich_choices=ExampleRichChoices),
+        widget=RichRadioSelect(extended_choices=ExampleRichChoices),
     )
 ```
 

dsfr/enums.py

@@ -422,3 +422,37 @@ def html_label(self):
             if hasattr(self, self.private_variable_name("html_label"))
             else self.label
         )
+
+
+class SegmentedControlChoices(ExtendedChoices):
+    """
+    Version spécialisée de `ExtendedChoices` à utiliser avec
+    `dsfr.widgets.SegmentedControl`. Cette version déclare en plus la propriété
+    `icon` :
+
+    ```python
+    >>> from enum import auto
+    >>> from django.db.models import IntegerChoices
+    >>> class ExampleSegmentedControlChoices(IntegerChoices, SegmentedControlChoices):
+    ...   ITEM_1 = {
+    ...       "value": auto(),
+    ...       "label": "Item 1",
+    ...       "icon": "mail-line",
+    ...   }
+    ...   ITEM_2 = {
+    ...       "value": auto(),
+    ...       "label": "Item 2",
+    ...       "icon": "calendar-line",
+    ...   }
+    ...   ITEM_3 = {
+    ...       "value": auto(),
+    ...       "label": "Item 3",
+    ...       "icon": "archive-line",
+    ...   }
+    ```
+
+    """
+
+    @enum_property
+    def icon(self):
+        return getattr(self, self.private_variable_name("icon"), "")

dsfr/templates/dsfr/form_field_snippets/field_snippet.html

@@ -11,6 +11,8 @@
   {% include "dsfr/form_field_snippets/richradioselect_snippet.html" %}
 {% elif field|widget_type == "numbercursor" %}
   {% include "dsfr/form_field_snippets/numbercursor_snippet.html" %}
+{% elif field|widget_type == "segmentedcontrol" %}
+  {% include "dsfr/form_field_snippets/segmented_control_snippet.html" %}
 {% else %}
   {% include "dsfr/form_field_snippets/input_snippet.html" %}
 {% endif %}

dsfr/templates/dsfr/form_field_snippets/segmented_control_snippet.html

@@ -0,0 +1,10 @@
+{% load dsfr_tags %}
+
+<div class="fr-input-group">
+  <fieldset class="fr-segmented {{ field.field.widget.extra_classes }}">
+    <legend class="fr-segmented__legend {% if field.field.widget.is_inline %}fr-segmented__legend--inline{% endif %}">
+      {{ field.label }}
+    </legend>
+    {{ field }}
+  </fieldset>
+</div>

dsfr/templates/dsfr/widgets/segmented_control.html

@@ -0,0 +1,9 @@
+{% load dsfr_tags %}
+
+<div class="fr-segmented__elements">
+{% for group, options, index in widget.optgroups %}
+  {% for option in options %}
+    {% include option.template_name with widget=option %}
+  {% endfor %}
+{% endfor %}
+</div>

dsfr/templates/dsfr/widgets/segmented_control_option.html

@@ -0,0 +1,11 @@
+<div class="fr-segmented__element">
+  <input value="{{ widget.value }}"
+         type="radio"
+         id="segmented-{{ widget.attrs.id }}"
+         name="{{ widget.name }}"
+         {% include "django/forms/widgets/attrs.html" %}
+  >
+  <label class="{% if widget.icon %}fr-icon-{{ widget.icon }}{% endif %} fr-label" for="segmented-{{ widget.attrs.id }}">
+    {{ widget.label }}
+  </label>
+</div>

dsfr/test/test_form_field_snippets.py

@@ -1,9 +1,15 @@
 from django import forms
+from django.db.models import IntegerChoices
 from django.template import Context, Template
 from django.test import SimpleTestCase
 
+from dsfr.enums import SegmentedControlChoices
 from dsfr.forms import DsfrBaseForm
-from dsfr.widgets import InlineRadioSelect, InlineCheckboxSelectMultiple
+from dsfr.widgets import (
+    InlineRadioSelect,
+    InlineCheckboxSelectMultiple,
+    SegmentedControl,
+)
 
 
 class RadioSelectTestCase(SimpleTestCase):
@@ -68,3 +74,35 @@ def test_inline(self):
         self.assertTrue(
             'class="fr-fieldset__element fr-fieldset__element--inline"' in rendered
         )
+
+
+class SegmentedControlTestCase(SimpleTestCase):
+    class DummyForm(DsfrBaseForm):
+        class ExampleSegmentedControlChoices(IntegerChoices, SegmentedControlChoices):
+            ITEM_1 = {
+                "value": 1,
+                "label": "Item 1",
+                "icon": "table-line",
+            }
+            ITEM_2 = {
+                "value": 2,
+                "label": "Item 2",
+                "icon": "list-unordered",
+            }
+            ITEM_3 = {
+                "value": 3,
+                "label": "Item 3",
+                "icon": "layout-grid-line",
+            }
+
+        checkbox_field = forms.ChoiceField(
+            choices=ExampleSegmentedControlChoices.choices,
+            widget=SegmentedControl(extended_choices=ExampleSegmentedControlChoices),
+        )
+
+    def test_rendered(self):
+        rendered = Template("{{form}}").render(
+            Context({"form": SegmentedControlTestCase.DummyForm()})
+        )
+        self.assertTrue('class="fr-segmented__elements"' in rendered)
+        self.assertTrue('<label class="fr-icon-table-line fr-label"' in rendered)

dsfr/widgets.py

@@ -1,3 +1,4 @@
+import warnings
 from typing import Type
 
 from django.forms.widgets import (
@@ -9,43 +10,56 @@
 from django.http import QueryDict
 from django.utils.datastructures import MultiValueDict
 
-from dsfr.enums import RichRadioButtonChoices
+from dsfr.enums import ExtendedChoices
 
 
 __all__ = [
     "RichRadioSelect",
     "InlineRadioSelect",
     "InlineCheckboxSelectMultiple",
     "NumberCursor",
+    "SegmentedControl",
 ]
 
 
-class _RichChoiceWidget(ChoiceWidget):
+class _ExtendedChoicesWidget(ChoiceWidget):
     inline = False
 
     def __init__(
-        self, rich_choices: Type[RichRadioButtonChoices], inline=None, attrs=None
+        self,
+        extended_choices: Type[ExtendedChoices],
+        rich_choices: Type[ExtendedChoices] = None,  # /!\ do not use, deprecated
+        inline=None,
+        attrs=None,
     ):
         super().__init__(attrs)
-        self.rich_choices = rich_choices
+        if rich_choices:
+            # TODO before v3.0, delete rich_choices argument and this block
+            self.extended_choices = rich_choices
+            warnings.warn(
+                "Argument rich_choices is deprecated, it has been renamed extended_choices and will be removed by the next major release.",
+                DeprecationWarning,
+                stacklevel=3,
+            )
+        self.extended_choices = extended_choices
         if inline is not None:
             self.inline = inline
 
     @property
     def choices(self):
-        return self.rich_choices.choices
+        return self.extended_choices.choices
 
     @choices.setter
     def choices(self, value):
         """
-        Superseded by self.rich_choices;
+        Superseded by self.extended_choices;
         kept for compatibility with ChoiceWidget.__init__
         """
         ...
 
     def __deepcopy__(self, memo):
         obj = super().__deepcopy__(memo)
-        obj.rich_choices = self.rich_choices
+        obj.extended_choices = self.extended_choices
         return obj
 
     def create_option(
@@ -60,15 +74,15 @@ def create_option(
 
         opt.update(
             {
-                k: getattr(self.rich_choices(value), k)
-                for k in self.rich_choices.additional_attributes
+                k: getattr(self.extended_choices(value), k)
+                for k in self.extended_choices.additional_attributes
             }
         )
 
         return opt
 
 
-class RichRadioSelect(_RichChoiceWidget, RadioSelect):
+class RichRadioSelect(_ExtendedChoicesWidget, RadioSelect):
     """
     Widget permettant de produire des boutons radio riches. Ce widget fonctionne avec
     `dsfr.enums.RichRadioButtonChoices`.
@@ -82,6 +96,7 @@ class RichRadioSelect(_RichChoiceWidget, RadioSelect):
     >>> from enum import auto
     >>> from django.db.models import IntegerChoices
     >>> from django import forms
+    >>> from dsfr.enums import RichRadioButtonChoices
     >>> from dsfr.forms import DsfrBaseForm
     >>> from dsfr.utils import lazy_static
 
@@ -111,7 +126,7 @@ class RichRadioSelect(_RichChoiceWidget, RadioSelect):
     ...         required=False,
     ...         choices=ExampleRichChoices.choices,
     ...         help_text="Exemple de boutons radios riches",
-    ...         widget=RichRadioSelect(rich_choices=ExampleRichChoices),
+    ...         widget=RichRadioSelect(extended_choices=ExampleRichChoices),
     ...     )
     ```
 
@@ -192,3 +207,15 @@ def value_from_datadict(self, data: QueryDict, files: MultiValueDict, name: str)
 
     def format_value(self, value):
         return value
+
+
+class SegmentedControl(_ExtendedChoicesWidget, ChoiceWidget):
+    template_name = "dsfr/widgets/segmented_control.html"
+    option_template_name = "dsfr/widgets/segmented_control_option.html"
+
+    def __init__(
+        self, *args, extra_classes: str = "", is_inline: bool = False, **kwargs
+    ):
+        super().__init__(*args, **kwargs)
+        self.extra_classes = extra_classes
+        self.is_inline = is_inline

example_app/dsfr_components.py

@@ -1119,34 +1119,7 @@
     sorted(unsorted_IMPLEMENTED_COMPONENTS.items(), key=lambda k: k[1]["title"])
 )
 
-NOT_YET_IMPLEMENTED_COMPONENTS = {
-    "radio_rich": {
-        "title": "Bouton radio riche",
-        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-radio-riche",
-        "example_url": "https://main--ds-gouv.netlify.app/example/component/radio/",
-        "note": """À implémenter au sein des formulaires et non comme une balise.
-        cf. [#126](https://github.com/numerique-gouv/django-dsfr/issues/126)
-        """,
-    },
-    "segmented_control": {
-        "title": "Contrôle segmenté",
-        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/controle-segmente",
-        "example_url": "https://main--ds-gouv.netlify.app/example/component/segmented/",
-        "storybook_url": "https://storybook.systeme-de-design.gouv.fr/?path=/docs/segmented--docs",
-        "note": """À implémenter au sein des formulaires et non comme une balise.
-        cf. [#128](https://github.com/numerique-gouv/django-dsfr/issues/128)
-        """,
-    },
-    "range": {
-        "title": "Curseur",
-        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/curseur-range",
-        "example_url": "https://main--ds-gouv.netlify.app/example/component/range/",
-        "storybook_url": "https://storybook.systeme-de-design.gouv.fr/?path=/docs/range--docs",
-        "note": """À implémenter au sein des formulaires et non comme une balise.
-        cf. [#129](https://github.com/numerique-gouv/django-dsfr/issues/129)
-        """,
-    },
-}
+NOT_YET_IMPLEMENTED_COMPONENTS = {}
 
 # There is no need for specific tags for these
 # (either because the DSFR is implemented globally or because they are