forms: use a css class to display radio choices inline (#50089)

tests/test_fields.py

@@ -466,28 +466,28 @@ def test_item_radio_lengths():
     form = Form(use_tokens=False)
     field.add_to_form(form)
     form.render()
-    assert str(form.widgets[-1].render()).count('<br') == 0
+    assert 'widget-inline-radio' in str(form.widgets[-1].render())
 
     field = fields.ItemField(id='1', label='Foobar', display_mode='radio',
             items=['aa'*30, 'ab', 'ac'])
     form = Form(use_tokens=False)
     field.add_to_form(form)
     form.render()
-    assert str(form.widgets[-1].render()).count('<br') == 2
+    assert 'widget-inline-radio' not in str(form.widgets[-1].render())
 
     field = fields.ItemField(id='1', label='Foobar', display_mode='radio',
             items=['aa', 'ab'*30, 'ac'])
     form = Form(use_tokens=False)
     field.add_to_form(form)
     form.render()
-    assert str(form.widgets[-1].render()).count('<br') == 2
+    assert 'widget-inline-radio' not in str(form.widgets[-1].render())
 
     field = fields.ItemField(id='1', label='Foobar', display_mode='radio',
             items=['aa', 'ab', 'ac', 'ad'])
     form = Form(use_tokens=False)
     field.add_to_form(form)
     form.render()
-    assert str(form.widgets[-1].render()).count('<br') == 3
+    assert 'widget-inline-radio' not in str(form.widgets[-1].render())
 
 
 def test_items_render():

wcs/backoffice/management.py

@@ -2849,7 +2849,8 @@ class FormBackOfficeStatusPage(FormStatusPage):
                      ('html_template', _('HTML Template (WYSIWYG)'), 'html_template'),
                  ],
                  value='django-condition',
-                 attrs={'data-dynamic-display-parent': 'true'})
+                 attrs={'data-dynamic-display-parent': 'true'},
+                 extra_css_class='widget-inline-radio')
         form.add(StringWidget, 'django-condition',
                  extra_css_class='grid-1-1',
                  attrs={

wcs/fields.py

@@ -1608,9 +1608,10 @@ class ItemField(WidgetField, MapOptionsMixin, ItemFieldMixin):
             else:
                 first_items = [x[1] for x in kwargs['options'][:3]]
             length_first_items = sum([len(x) for x in first_items])
-            if len(kwargs['options']) > 3 or length_first_items > 40:
-                # TODO: absence/presence of delimitor should be an option
-                kwargs['delim'] = htmltext('<br />')
+            # display radio buttons on a single line if there's just a few
+            # short options.
+            # TODO: absence/presence of delimitor should be an option
+            self.inline = bool(len(kwargs['options']) <= 3 and length_first_items <= 40)
         elif display_mode == 'autocomplete':
             kwargs['select2'] = True
         elif display_mode == 'map':

wcs/qommon/static/css/qommon.scss

@@ -273,10 +273,14 @@ div.CheckboxesWidget div.content ul.inline li {
 	margin-right: 2em;
 }
 
-div.CheckboxesWidget .content label,
-div.RadiobuttonsWidget .content label {
-	display: inline-block;
+div.CheckboxesWidget, div.RadiobuttonsWidget {
 	padding: 5px 0;
+	.content label {
+		display: block;
+	}
+	&.widget-inline-radio .content label {
+		display: inline-block;
+	}
 }
 
 div.dataview {

wcs/qommon/templates/qommon/forms/widget.html

@@ -1,8 +1,8 @@
-<div class="widget {{widget.class_name}} {{widget.extra_css_class}}
+<div class="{% block widget-css-classes %}widget {{widget.class_name}} {{widget.extra_css_class}}
      {% if widget.readonly %}widget-readonly{% endif %}
      {% if widget.get_error %}widget-with-error{% endif %}
      {% if widget.is_required %}widget-required{% else %}widget-optional{% endif %}
-     {% if widget.is_prefilled %}widget-prefilled{% endif %}"
+     {% if widget.is_prefilled %}widget-prefilled{% endif %}{% endblock %}"
      {% if widget.is_hidden %}style="display: none"{% endif %}
      {% if widget.field %}data-field-id="{{ widget.field.id }}"{% endif %}
      data-widget-name="{{ widget.name }}"

wcs/qommon/templates/qommon/forms/widgets/radiobuttons.html

@@ -1,5 +1,7 @@
 {% extends "qommon/forms/widget.html" %}
 
+{% block widget-css-classes %}{{ block.super }}{% if widget.field.inline %} widget-inline-radio{% endif %}{% endblock %}
+
 {% block widget-control %}
 {% for option in widget.get_options %}
  <label {% if option.disabled %}class="disabled"{% endif %}><input